本文作者:大发快3辅助_快3网页版_是真实吗|

CSS技巧:利用animation动画完成呼吸灯作用

摘要: 在阿里云看到其 Banner 上的一个呼吸灯效果,感觉十分具有科技感,看了下源码,原本仅仅一个CSS3效果,利用 animation 来实现的动画效果,一时技痒就写了一个 demo...

在阿里云看到其 Banner 上的一个呼吸灯效果,感觉十分具有科技感,看了下源码,原本仅仅一个CSS3效果,利用 animation 来实现的动画效果,一时技痒就写了一个 demo 记载一下。

CSS技巧:利用animation动画完成呼吸灯作用   实用技巧 zblog  第1张

呼吸灯实现思路

底图是一个暗的灯 jpg,另外一张图则是亮灯的 png 通明图片,使用肯定定位将亮灯图片定位在底图上。然后用 animation 写出动效,也就是呼吸灯的闪动作用。最终亮灯图片款式绑定该动效,完结呼吸灯作用。

呼吸灯实现代码

html 结构

<div class="wrap">
<img src="http://img.alicdn.com/tfs/TB15mxgIxSYBuNjSspjXXX73VXa-3840-1280.jpg" alt="呼吸底灯" class="img1">
<img src="http://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 浏览器,那时做起前端来,该是多么的舒爽的啊。


推荐阅读:

如何自由放置Apple手机的桌面图标

支付宝集五福活动倒计时 1.25日0点正式开启

苹果低电池提醒如何关闭?iPhone盾牌电池低电量提醒方法

文章版权及转载声明:

作者:大发快3辅助_快3网页版_是真实吗|本文地址:http://rangyuanfei.com/blog/220.html发布于 9个月前 ( 12-21 )
文章转载或复制请以超链接形式并注明出处大发快3辅助_快3网页版_是真实吗|