最近发现一个很有趣的CSS特效，好东西得学习下，所以记录下。
某云Banner 上的动画效果，非常有科技感，查看了下代码，原来只是用了CSS3里animation breath 的 效果，它也有中文名：呼吸灯效果；
可利用 animation 来实现的动画效果。
然后呢，网站居然不支持web格式图，导致不能动态，这是很悲伤，具体看下面代码。
HTML代码
<div class="wrap"> <img src="https://upload.kufanyun.com/download/Aan/bg.jpg" alt="呼吸底灯背景图" class="img1"> <img src="https://upload.kufanyun.com/download/Aan/main.png" alt="呼吸灯动效图" class="img2"> </div>
CSS3代码。
*{margin:0;padding:0;border:0}
.wrap{width:500px;height:315px;position:relative;margin:0 auto;overflow:hidden}
.img1,
.img2{width:500px;height:315px;position:absolute;}
.img2{-webkit-animation:breath 3s infinite ease-in-out alternate;animation:breath 3s infinite ease-in-out alternate}
@-webkit-keyframes breath{
0%{opacity:.2}
70%{opacity:1}
to{opacity:.2}
}
@keyframes breath{
0%{opacity:.2}
70%{opacity:1}
to{opacity:.2}
}
图片来源于AI模型，如侵权请联系管理员。作者：酷小编，如若转载，请注明出处：https://www.kufanyun.com/ask/885.html
