CSS技巧: 使用实现呼吸光效果

在阿里云上，我看到了它的Banner的呼吸效果. 感觉非常技术性. 阅读源代码后，结果证明它只是CSS3效果. 通过实现的效果用于编写演示记录. 一点.

基本图像是暗光jpg呼吸灯效果，另一个图像是亮光png透明图像，使用绝对定位将光图像定位在基本图像上. 然后使用编写运动效果呼吸灯效果，这是呼吸灯的闪烁效果. 最后，照亮的图片样式将绑定到此动态效果以完成呼吸光效果. 请转到特定效果: 演示.

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

*{
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的属性，这在业界确实是一件很棒的事情. 我不知道市场何时可以完全放弃较低版本的IE浏览器. 那时，成为前端真的很舒服.

如果本文对您有所帮助，请感谢并支持作者继续创建！

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/shouji/article-187523-1.html