CSS技巧:利用animation动画实现呼吸灯效果

投稿   雅兮网  2018-12-21 07:15:12  345 人阅读  13 条评论

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

CSS技巧:利用animation动画实现呼吸灯效果 海纳百川 第1张

呼吸灯实现思路

底图是一个暗的灯 jpg,另外一张图则是亮灯的 png 透明图片,利用绝对定位将亮灯图片定位在底图上。然后用 animation 写出动效,也就是呼吸灯的闪动效果。最后亮灯图片样式绑定该动效,完成呼吸灯效果。具体效果请移步:DEMO

呼吸灯实现代码

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

您可能感兴趣的文章

如果文章对你有帮助,请赞赏支持作者继续创作!

文章标签: ,   ,  
原文地址:https://www.yaxi.net/2018-12-18/1890.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 雅兮网 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
©boke112导航,本站推荐使用:阿里云 ECS服务器等云产品服务,国外免备案主机建议使用:老薛主机
雅兮网

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. 沙扬娜拉
    沙扬娜拉 @回复

    上次有博主说我logo好丑,有谁会弄logo啊~

  2. wordpress建站吧
    wordpress建站吧 @回复

    这个效果原来叫呼吸灯 啊,,又学到了

  3. Quanyin
    Quanyin @回复

    [中国赞] ,css3 html5这些新版本感觉真能玩出花来。。。
    真佩服那些主浏览器仍是ie的,尤其是老版本的,各种特性不支持,各种不支持

  4. 99八十一
    99八十一 @回复

    很炫酷的样子 [偷笑]

  5. 黑鸟博客
    黑鸟博客 @回复

    这个要用在博客的什么地方好呢..

  6. 洁灰博客园
    洁灰博客园 @回复

    哈哈,这个效果真是有心了,

  7. 官仁有话说
    官仁有话说 @回复

    最近太忙,没时间访问各位的站点。。近来天气冷了,多加衣!

  8. 异星软件空间
    异星软件空间 @回复

    很炫酷的样子

  9. 手机赚钱
    手机赚钱 @回复

    这种花里胡哨的玩不来 [嘻嘻]

  10. 靠谱学生兼职网
    靠谱学生兼职网 @回复

    玩得得心应手啊

  11. 灵异世界网
    灵异世界网 @回复

    很有特效感。。

  12. Action
    Action @回复

    这个很炫酷了。

  13. 魏义齐个人博客
    魏义齐个人博客 @回复

    用纯css写过星星闪烁效果,动画关键在于设计思路