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

用纯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

用纯CSS3实现闪闪发光的动画相关推荐

纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com
纯html5语言编写的动画,8个纯CSS3制作的动画应用及源码
本文作者html5tricks,转载请注明出处对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以 ...
纯css3可爱仙人掌动画效果
下载地址纯css3可爱仙人掌动画效果,html+css代码,没有使用任何JavaScript代码实现的动画效果. dd:
纯CSS3冰川北极熊动画js特效
下载地址纯CSS3冰川北极熊动画特效是一款卡通可爱的北极熊站在冰面上漂浮动画场景特效. dd:
html纯css页面滑动效果,纯css3滑动按钮动画效果
android系统的滑动按钮相信大家都使用过.这款插件就是使用纯css3制作出类似android系统的滑动按钮效果. HTML html代码十分简单.使用一个大的div作为包裹容器,给它一个class ...
纯CSS3实现3D动画导航，html5 webRTC技术实现免费网页电话拨打
花了一周的时间完成了说吧 (免费网页电话) 的前端开发工作,先将技术点总结如下: 免费电话采用最新的html5 webRTC 技术实现互联网和电信MIS网互通实现网页电话,目前只有 google ...
纯css3模拟龙卷风动画js特效
下载地址纯css3代码实现的龙卷风特效,css模拟龙卷风动画代码. dd:
纯css3太阳照射动画js特效
下载地址纯css3实现的太阳特效,css太阳照射动画特效 dd:
JS框架_(JQuery.js)纯css3进度条动画
百度云盘传送门密码:wirc 进度条动画效果: <!DOCTYPE html> <htmllang="zh"> <head><meta ...

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

用纯CSS3实现闪闪发光的动画相关推荐

最新文章

热门文章