纯CSS3实现圆圈动态发光特效动画的示例代码

建站知识 2021-07-02 23:04www.168986.cn长沙网站建设

本文主要介绍了纯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;
            : 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;
            : -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%;
            : 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;
            : 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%;
            : 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 规定动画的速度曲线。默认是 “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

原文

到此这篇关于纯CSS3实现圆圈动态发光特效动画的示例代码的文章就介绍到这了,更多相关CSS3圆圈动态发光内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章，希望大家以后多多支持狼蚁SEO！

上一篇：css3实现书本翻页效果的示例代码下一篇：CSS实现图像映射的方法

纯CSS3实现圆圈动态发光特效动画的示例代码

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

纯CSS3实现圆圈动态发光特效动画的示例代码

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设