在阿里云看到 Banner 上的动画效果, 感觉非常具有科技感.
看了下源码，原来只是用CSS3里animation breath 的 效果，中文名叫呼吸灯效果.
利用 animation 来实现的动画效果.
好东西要得学呀~ 写了一个 demo 记录一下.
效果图
HTML 代码
<div class="wrap">
<img src="http://cdn.nickspace.cn/bg.jpg" alt="呼吸底灯背景图" class="img1">
<img src="http://cdn.nickspace.cn/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}
}
