本文主要介绍了纯css3实现圆圈动态发光特效动画的示例代码，分享给大家，具体如下：
效果图：
代码：
<!doctype html><html><head> <title>纯css3实现圆圈动态发光特效动画</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 ea-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 { pos亲爱的安德烈ition: 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; buy的第三人称单数 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>这个效果的具体实现主要是用到了css3 的animation
它共有8个属性：
animation-name 规定 @keyframes 动画的名称。
用来定义一个动画的名称。
如果要设置几个animation给一个元素，我们只需要以列表的形式，用逗号“，”隔开
animation-duration 动画时长
用来指定元素播放一个周期的动画所持续的时间长，单位为秒（s）或毫秒（ms），默认值为0
animation-timing-function 规定动画的速度曲线。默认是 “ea”。
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ea 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ea-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ea-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ea-in-out 规定以慢速小布什简历开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
animation-delay 规定动画何时开始。默认是 0。允许负值，动画跳过 2 秒进入动画周期，也就是从2s的动画开始
animation-iteration-count 规定动画被播放的次数。默认是 1
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-fill-mode 规定动画在播放之前或之后，其动画效果是否可见。
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
综合起来简写
animation : name duration timing-function delay iteration-count direction fill-mode play-state
原文：
到此这篇关于纯css3实现圆圈动态发光特效动画的示例代码的文章就介绍到这了,更多相关css3圆圈动态发光内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！
本文发布于:2023-04-07 18:01:03，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/bfa892e91983864533535040be243b5c.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：纯CSS3实现圆圈动态发光特效动画的示例代码.doc
本文 PDF 下载地址：纯CSS3实现圆圈动态发光特效动画的示例代码.pdf
| 留言与评论（共有 0 条评论） |
