• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文主要介绍了纯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 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>

这个效果的具体实现主要是用到了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

原文：https://blog.csdn.net/qq_34576876/article/details/95532946

           https://blog.csdn.net/weixin_42541698/article/details/102686976

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

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
CSS实现图像映射的方法发布时间：2022-06-21
下一篇：
css3实现书本翻页效果的示例代码发布时间：2022-06-21
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap