下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家，也给大家做个参考。

在阿里云看到其 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 浏览器，那时做起前端来，该是多么的舒爽的啊。

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。