CSS技巧：利用animation breath动画实现超科技炫酷效果

在阿里云看到 Banner 上的动画效果, 感觉非常具有科技感.
看了下源码，原来只是用CSS3里animation breath 的 效果，中文名叫呼吸灯效果.
利用 animation 来实现的动画效果.

好东西要得学呀~ 写了一个 demo 记录一下.

效果图

HTML 代码

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}
}