呼吸灯实现思路
底图是一个暗的灯 jpg，另外一张图则是亮灯的 png 透明图片，利用绝对定位将亮灯图片定位在底图上。然后用 animation 写出动效，也就是呼吸灯的闪动效果。最后亮灯图片样式绑定该动效，完成呼吸灯效果。具体效果请移步：DEMO。
呼吸灯实现代码
html 结构
<div class="wrap"> <img src="../../img/TB15mxgIxSYBuNjSspjXXX73VXa-3840-1280.jpg" alt="呼吸底灯" class="img1"> <img src="../../img/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 浏览器，那时做起前端来，该是多么的舒爽的啊。
