利用animation动画如何实现呼吸灯效果推荐

摘要： 在阿里云看到其Banner上的一个呼吸灯效果，感觉非常具有科技感，看了下源码，原来只是一个CSS3效果，利用animation来实现的动画效果，一时技痒就写了一个demo记录一下。...

在阿里云看到其Banner上的一个呼吸灯效果，感觉非常具有科技感，看了下源码，原来只是一个CSS3效果，利用animation来实现的动画效果，一时技痒就写了一个demo记录一下。

思路：底图是一个暗的灯jpg，另外一张图则是亮灯的png透明图片，利用绝对定位将亮灯图片定位在底图上。然后用animation写出动效，也就是呼吸灯的闪动效果。最后亮灯图片样式绑定该动效，完成呼吸灯效果。

代码如下

html结构

<div class="wrap"><img src="https://img.alicdn.com/tfs/TB15mxgIxSYBuNjSspjXXX73VXa-3840-1280.jpg" alt="呼吸底灯" class="img1"><img src="https://img.alicdn.com/tfs/TB1i8oWIbGYBuNjy0FoXXciBFXa-3840-1280.png" alt="呼吸灯" class="img2"></div>

CSS样式

*{margin:0;padding:0;border:0;}.wrap{width: 800px;height: 600px;position: relative;margin: 0 auto;overflow: hidden;}.img1,.img2{width: 1920px;position: absolute;left: 50%;margin-left: -1360px;}.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;}}

整段代码还是比较好懂的，可惜的是IE9及以下版本的IE浏览器不支持CSS3的animation属性，真是业界的奇葩，不知道何时市场才能完全放弃低版本的IE浏览器，那时做起前端来，该是多么的舒爽的啊。