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


Posted in HTML / CSS onMarch 08, 2021

本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码,分享给大家,具体如下:

效果图:

纯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圆圈动态发光内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
html5调用摄像头实例代码
Jun 28 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 #HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 #HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 #HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 #HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 #HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 #HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 #HTML / CSS
You might like
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
TypeScript入门-接口
2017/03/30 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
vue多次循环操作示例
2019/02/08 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
详解Django CAS 解决方案
2019/10/30 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
简短的公司员工自我评价分享
2013/11/13 职场文书
财产分割协议书范本
2014/11/03 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android