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
Mysql 5.6 adds a method to modify username and password
Log in to MySQL first shell> mysql --user=root...
Web Design Experience: Self-righteous Web Designers
1. Trash or Classic? Web technology updates very ...
Elegant practical record of introducing iconfont icon library into vue
Table of contents Preface Generate SVG Introducti...
$nextTick explanation that you can understand at a glance
Table of contents 1. Functional description 2. Pa...
A detailed introduction to the netstat command in Linux
Table of contents 1. Introduction 2. Output Infor...
How to use Docker to build enterprise-level custom images
Preface Before leaving get off work, the author r...
Color matching techniques and effect display for beauty and styling websites
Color is one of the most important elements for a...
CSS shadow animation optimization tips
This technique comes from this article - How to a...
Centos7 installation of FFmpeg audio/video tool simple document
ffmpeg is a very powerful audio and video process...
Analysis and opinions on the design structure of the large picture on the homepage of Taobao Mall (picture)
After I analyzed the Taobao details page last time...
Detailed explanation of the relationship between image format and design in web design
Why do I want to organize the content in this area...
Semantics: Is Html/Xhtml really standards-compliant?
<br />Original text: http://jorux.com/archiv...
ERROR 1045 (28000): Access denied for user ''root''@''localhost'' (using password: YES) Practical solution
There was no problem connecting to the database y...
Detailed explanation of how to use amoeba to implement read-write separation of MySQL database
There are many read-write separation architecture...
vue+echarts realizes the flow effect of China map (detailed steps)
@vue+echarts realizes the flow effect of China ma...