Sample code for implementing dynamic glowing special effects animation of circles using pure CSS3
|
This article mainly introduces the sample code of pure CSS3 to realize the dynamic glowing special effects animation of circles, and shares it with you. The details are as follows: Effect picture:
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Pure CSS3 to achieve dynamic circle glowing special effects animation</title>
<style>
body {
background-color: #000000;
}
@keyframes twinkling {
0% {
opacity: 0.2;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(1.12);
}
100% {
opacity: 0.2;
transform: scale(1);
}
}
.circle-wrap {
position: absolute;
left: 100px;
top: 100px;
}
.circle {
position: relative;
width: 24px;
height: 24px;
}
.small-circle {
border-radius: 50%;
width: 12px;
height: 12px;
background: #FF0033;
position: absolute;
}
.big-circle {
position: absolute;
top: -6px;
left: -6px;
width: 100%;
height: 100%;
border-radius: 50%;
background: #FF0033;
animation: twinkling 1s infinite ease-in-out;
animation-fill-mode: both;
}
@keyframes scale {
0% {
transform: scale(1)
}
50%,
75% {
transform: scale(3)
}
78%,
100% {
opacity: 0
}
}
@keyframes scales {
0% {
transform: scale(1)
}
50%,
75% {
transform: scale(2)
}
78%,
100% {
opacity: 0
}
}
.smallcircle2 {
position: absolute;
width: 12px;
height: 12px;
background-color: #ffffff;
border-radius: 50%;
top: 100px;
left: 200px;
}
.smallcircle2:before {
content: '';
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
opacity: .4;
background-color: #ffffff;
animation: scale 1s infinite cubic-bezier(0, 0, .49, 1.02);
}
.bigcircle2 {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
opacity: .4;
background-color: #ffffff;
top: 100px;
left: 200px;
animation: scales 1s infinite cubic-bezier(0, 0, .49, 1.02);
}
@keyframes scaless {
0% {
transform: scale(1)
}
50%,
75% {
transform: scale(3)
}
78%,
100% {
opacity: 0
}
}
.item {
position: absolute;
width: 14px;
height: 14px;
background-color: #FFFF00;
border-radius: 50%;
top: 150px;
left: 100px;
}
.item:before {
content: '';
display: block;
width: 14px;
height: 14px;
border-radius: 50%;
opacity: .7;
background-color: #FFFF00;
animation: scaless 1s infinite cubic-bezier(0, 0, .49, 1.02);
}
</style>
</head>
<body>
<div class="circle-wrap">
<div class="circle">
<div class="big-circle"></div>
<div class="small-circle"></div>
</div>
</div>
<div class="smallcircle2"></div>
<div class="bigcircle2"></div>
<div class="item"></div>
</body>
</html>The specific implementation of this effect mainly uses CSS3 animation It has 8 properties: animation-name specifies the name of the @keyframes animation. animation-duration animation duration Used to specify the duration of an element's animation in seconds (s) or milliseconds (ms). The default value is 0 animation-timing-function specifies the speed curve of the animation. The default is "ease". animation-delay specifies when the animation starts. The default is 0. Negative values are allowed, the animation skips 2 seconds and enters the animation cycle, that is, starting from the 2s animation animation-iteration-count specifies the number of times the animation is played. The default value is 1 animation-direction specifies whether the animation should play in reverse direction on the next cycle. The default is "normal". animation-fill-mode specifies whether the animation effect should be visible before or after the animation is played. animation-play-state specifies whether the animation is running or paused. The default is "running". In short, animation : name duration timing-function delay iteration-count direction fill-mode play-state Original text: https://blog.csdn.net/qq_34576876/article/details/95532946 https://blog.csdn.net/weixin_42541698/article/details/102686976 This concludes this article about the sample code for implementing dynamic glowing circle special effects animation using pure CSS3. For more relevant CSS3 dynamic glowing circle content, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Spring Boot layered packaging Docker image practice and analysis (recommended)
>>: HTML uses regular expressions to test table examples
Recommend
CentOS8 - bash: garbled characters and solutions
This situation usually occurs because the Chinese...
Do not start CSS pseudo-class names with numbers
When newbies develop div+css, they need to name t...
How to display a small icon in front of the browser URL
When you browse many websites, you will find that ...
Steps for customizing node installation to change the default installation path of npm global modules
I installed node to the D drive, and I also neede...
Why developers must understand database locks in detail
1.Lock? 1.1 What is a lock? The real meaning of a...
Implementation of TypeScript in React project
Table of contents 1. Introduction 2. Usage Statel...
Analysis of the reasons why MySQL's index system uses B+ tree
Table of contents 1. What is an index? 2. Why do ...
CSS realizes the scene analysis of semi-transparent border and multiple border
Scenario 1: To achieve a semi-transparent border:...
This article summarizes the implementation methods of 6 load balancing technologies (summary)
Load balancing is a commonly used device in serve...
Why Google and Facebook don't use Docker
The reason for writing this article is that I wan...
I have compiled a few cool design sites that I think are good.
You must have inspiration to design a website. Goo...
Implementation of nginx multiple locations forwarding any request or accessing static resource files
This article mainly introduces the implementation...
43 Web Design Mistakes Web Designers Should Watch Out For
This is an article about website usability. The a...
Tutorial on installing the unpacked version of mysql5.7 on CentOS 7
1. Unzip the mysql compressed package to the /usr...
Guide to Efficient Use of MySQL Indexes
Preface I believe most people have used MySQL and...