在阿里云看到 Banner 上的動(dòng)畫(huà)效果, 感覺(jué)非常具有科技感.
看了下源碼，原來(lái)只是用CSS3里animation breath 的 效果，中文名叫呼吸燈效果.
利用 animation 來(lái)實(shí)現(xiàn)的動(dòng)畫(huà)效果.

好東西要得學(xué)呀~ 寫(xiě)了一個(gè) 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="呼吸燈動(dòng)效圖" 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}
}