利用animation动画实现呼吸灯效果

2018-12-18 16:21 来自本站原创 13,175 13 15
[摘要]

在阿里云看到其Banner上的一个呼吸灯效果,利用animation来实现的动画效果。

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

利用animation动画实现呼吸灯效果

直接看DEMO效果 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浏览器,那时做起前端来,该是多么的舒爽的啊。

本文最后更新于2019年1月26日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:13   其中:访客  0   博主  0
    加载中...
    1. 5年前 (2018-12-20) 0楼

      不错收藏了。。

    2. 5年前 (2018-12-19) 0楼

      自从flash大佬失势后,CSS3的春天就来了
      PS。抱残守缺的人,就如同装睡的人叫不醒一样~

      • Wing
        5年前 (2018-12-19)  地下1层

        @西枫里博客: 装睡的就让他们睡吧,我们起身走人就好了 [调皮]

      • 5年前 (2018-12-20)  地下1层

        @西枫里博客: 醒醒,你该起来浪了。话说css3确实很神奇,很多特效都吃得开。虽然不太懂css代码,但老感觉倍儿爽,不对,是倍牛逼!

    3. 5年前 (2018-12-19) 0楼

      我也想成为博主一样的前端大佬,怎么感觉这句话好矛盾

    4. 5年前 (2018-12-18) 0楼

      我是搞后端的,偶尔写下前端,博主前端大神

    5. 5年前 (2018-12-18) 0楼

      快了,微软的Chrome内核浏览器就要来了!

      • Wing
        5年前 (2018-12-18)  地下1层

        @明月登楼: 其实问题不在于IE用不用Webkit内核,而在于大量的用户依旧使用旧版的IE,哪怕是都升到IE11呢,CSS3和html5在国内将会快速发展起来。

        • 5年前 (2018-12-18)  地下2层

          @飞鸟: 呵呵,这个我倒是认为这些还在使用旧版IE的,都要归功于Windows XP了!

          • 5年前 (2018-12-19)  地下3层

            @明月登楼: 现在没有那么多xp吧了,win7记得没升级的话IE版本应该低于9,微软浏览器谷歌内核也没用,edge浏览器不管哪个版本的肯定支持雅西大佬说的这些特性,然而连win7都是不能升级,不能安装edge..

            • Wing
              5年前 (2018-12-19)  地下4层

              @黑鸟博客: 恩,xp用户无解,win7用户不更新系统也是无解,而且有很多CSS3新特性在IE全版本上都不太兼容,IE拥抱webikt内核 也算是幡然悔悟了,火狐一般都OK,opera也早就投入webkit阵营,以后就是webkit的天下了

          • Wing
            5年前 (2018-12-19)  地下3层

            @明月登楼: 是这个情况,现在还是有一部分使用XP的老机器,不升级系统就一直卡在低版本的IE6-IE8上,这部分人最无解,只能等到他们换电脑。另外win7自带IE8,不更新系统也无解。不过这机器被淘汰之后 一般预装的都是win10了,就好很多了。

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    分享 13 15 13,175
    Top