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
Solution to the problem that Docker container cannot access Jupyter
In this project, the Docker container is used to ...
Vue+axios sample code for uploading pictures and recognizing faces
Table of contents Axios Request Qs processing dat...
Beginners learn some HTML tags (3)
Related articles: Beginners learn some HTML tags ...
Summary of Mysql common benchmark commands
mysqlslap Common parameter description –auto-gene...
MySQL sorting by conventional sorting, custom sorting, and sorting by Chinese pinyin letters
MySQL regular sorting, custom sorting, and sortin...
Vue father-son value transfer, brother value transfer, child-father value transfer detailed explanation
Table of contents 1. Parent component passes valu...
The concept of MTR in MySQL
MTR stands for Mini-Transaction. As the name sugg...
Completely delete MySQL steps
Table of contents 1. Stop MySQL Server first 2. U...
Docker port mapping and external inaccessibility issues
The Docker container provides services and listen...
jQuery Ajax chatbot implementation case study
Chatbots can save a lot of manual work and can be...
Double loading issue when the page contains img src
<br />When the page contains <img src=&qu...
Analyze how uniapp dynamically obtains the interface domain name
background The interface domain name is not hard-...
How to simply configure multiple servers in nginx
1: I won’t go into the details of how to install ...
Three ways to achieve background blur in CSS3 (summary)
1. Normal background blur Code: <Style> htm...
Detailed Example of CSS3 box-shadow Property
CSS3 -- Adding shadows (using box shadows) CSS3 -...