纯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实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 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 empty函数判断mysql表单是否为空
2010/04/12 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
小程序实现列表删除功能
2018/10/30 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
介绍Python中的__future__模块
2015/04/27 Python
Python fileinput模块使用实例
2015/06/03 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
详解python-图像处理(映射变换)
2019/03/22 Python
python hashlib加密实现代码
2019/10/17 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
python小白学习包管理器pip安装
2020/06/09 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
班长岗位职责
2013/11/10 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
幼儿园美术教学反思
2014/01/31 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
营销与策划专业求职信
2014/06/20 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android