用纯CSS3实现闪闪发光的动画

最新推荐文章于 2024-06-20 08:54:23 发布

努力的小懒

最新推荐文章于 2024-06-20 08:54:23 发布

阅读量6.2k

点赞数 2

分类专栏： CSS3 文章标签： CSS3 animation 纯CSS3实现动画

本文链接：https://blog.csdn.net/qq_34576876/article/details/95532946

版权

CSS3 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

用纯CSS3实现闪闪发光的动画，最终实现效果如下图所示
在这里插入图片描述
以下展示实现该效果的代码：

<!DOCTYPE HTML>
        <html>
        <head>
            <title>纯CSS3实现闪闪发光的动画</title>
            <style>
                body{
                    background-color:#000000;
                }
                /*0%开始，100%结束*/
                @keyframes scale{
                    0%{transform:scale(1)}
                    50%,75%{transform:scale(3)}
                    78%,100%{opacity:0}
                }
                .item1 {
                position: absolute;
                width: 14px;
                height: 14px;
                background-color: #FFFF00;
                border-radius: 50%;
                margin: 100px  100px 50px 200px;
                }
                .item1:before {
                content: '';
                display:block;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                opacity: .7;
                background-color: #FFFF00;
                animation: scale 2s infinite cubic-bezier(0,0,.49,1.02);
                animation-delay: 200ms;
                }
                .item2 {
                position: absolute;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background-color: #5BFF4A;
                margin: 100px  100px 50px 300px;
                }
                
                .item2:before {
                content: '';
                display:block;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background-color: #5BFF4A;
                opacity: .7;
                animation: scale 2s infinite cubic-bezier(0,0,.49,1.02);
                animation-delay: 100ms;
                }
                .item3 {
                position: absolute;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background-color: #FF66CC;
                margin: 180px  100px 50px 200px;
                }
                
                .item3:before {
                content: '';
                display:block;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background-color: #FF66CC;
                opacity: .7;
                animation: scale 2s infinite cubic-bezier(0,0,.49,1.02);
                animation-delay: 400ms;
                }
                .item4 {
                position: absolute;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background-color: #FF0033;
                margin: 180px  100px 50px 300px;
                }
                
                .item4:before {
                content: '';
                display:block;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background-color: #FF0033;
                opacity: .7;
                animation: scale 2s infinite cubic-bezier(0,0,.49,1.02);
                animation-delay: 300ms;
                }
            </style>
        </head>
        <body>
            <div class="item1"></div>
            <div class="item2"></div>
            <div class="item3"></div>
            <div class="item4"></div>
    </body>
    </html>

这个效果的具体实现主要是用到了CSS3 的animation
它共有8个属性：

animation-name 规定 @keyframes 动画的名称。
用来定义一个动画的名称。
如果要设置几个animation给一个元素，我们只需要以列表的形式，用逗号“，”隔开
animation-duration 动画时长
用来指定元素播放一个周期的动画所持续的时间长，单位为秒（s）或毫秒（ms），默认值为0
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-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

努力的小懒

关注

2
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
用纯CSS3实现闪闪发光的动画

用纯CSS3实现闪闪发光的动画，最终实现效果如下图所示以下展示实现该效果的代码：<!DOCTYPE HTML> <html> <head> <title>纯CSS3实现闪闪发光的动画</title> <style> ...
复制链接

扫一扫