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

王小优
王小优
王小优
231
文章
0
评论
2015年12月15日 评论 3,778 2072字阅读6分54秒

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

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

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

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

代码如下

HTML结构

  1. <div class="wrap">
  2. <img src="https://img.alicdn.com/tfs/TB15mxgIxSYBuNjSspjXXX73VXa-3840-1280.jpg" alt="呼吸底灯" class="img1">
  3. <img src="https://img.alicdn.com/tfs/TB1i8oWIbGYBuNjy0FoXXciBFXa-3840-1280.png" alt="呼吸灯" class="img2">
  4. </div>

CSS样式

  1. *{
  2. margin:0;
  3. padding:0;
  4. border:0;
  5. }
  6. .wrap{
  7. width800px;
  8. height600px;
  9. positionrelative;
  10. margin: 0 auto;
  11. overflowhidden;
  12. }
  13. .img1,.img2{
  14. width1920px;
  15. positionabsolute;
  16. left: 50%;
  17. margin-left: -1360px;
  18. }
  19. .img2{
  20. -webkit-animation: breath 3s infinite ease-in-out alternate;
  21. animation: breath 3s infinite ease-in-out alternate;
  22. }
  23. @-webkit-keyframes breath {
  24. 0% {opacity: .2;}70% {opacity: 1;}to {opacity: .2;}
  25. }
  26. @keyframes breath {
  27. 0% {opacity: .2;}70% {opacity: 1;}to {opacity: .2;}
  28. }

完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>利用animation动画制作呼吸灯效果</title>
  6.     <style>
  7.     *{
  8.         margin:0;
  9.         padding:0;
  10.         border:0;
  11.     }
  12.     .wrap{
  13.         width: 800px;
  14.         height: 600px;
  15.         position: relative;
  16.         margin: 0 auto;
  17.         overflow: hidden;
  18.     }
  19.     .img1,.img2{
  20.         width: 1920px;
  21.         position: absolute;
  22.         left: 50%;
  23.         margin-left: -1360px;
  24.     }
  25.     .img2{
  26.         -webkit-animation: breath 3s infinite ease-in-out alternate;
  27.         animation: breath 3s infinite ease-in-out alternate;
  28.     }
  29.     @-webkit-keyframes breath {
  30.         0% {opacity: .2;}70% {opacity: 1;}to {opacity: .2;}
  31.     }
  32.     @keyframes breath {
  33.         0% {opacity: .2;}70% {opacity: 1;}to {opacity: .2;}
  34.     }
  35.     </style>
  36. </head>
  37. <body>
  38. <div class="wrap">
  39.     <img src="https://img.alicdn.com/tfs/TB15mxgIxSYBuNjSspjXXX73VXa-3840-1280.jpg" alt="呼吸底灯" class="img1">
  40.     <img src="https://img.alicdn.com/tfs/TB1i8oWIbGYBuNjy0FoXXciBFXa-3840-1280.png" alt="呼吸灯" class="img2">
  41. </div>
  42. </body>
  43. </html>

整段代码还是比较好懂的,可惜的是IE9及以下版本的IE浏览器不支持CSS3的animation属性,真是业界的奇葩,不知道何时市场才能完全放弃低版本的IE浏览器,那时做起前端来,该是多么的舒爽的啊。

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
用CSS3给按钮添加类似雷达扫光效果 CSS3

用CSS3给按钮添加类似雷达扫光效果

如今的Web前端技术层出不穷,大家所看的网页也从原来的简单刻板的风格逐步演变为绚丽多特效的“现代化”效果了,今天就用CSS3给一个按钮添加类似雷达扫光的效果。 如今的Web前端技术层出不穷,大家所看的...
纯CSS制作像素风史蒂芬·乔布斯 CSS

纯CSS制作像素风史蒂芬·乔布斯

都知道CSS3很强大,但你见过用几个标签加上纯CSS做的画么?下面就让我们看下用纯CSS画出来的乔布斯,太牛了! 先让我们看一下效果,虽然是像素风小人,但我们似乎还是能从人物的轮廓中隐约看出来这是苹果...
利用CSS3制作跳动音乐频谱跳动效果 CSS3

利用CSS3制作跳动音乐频谱跳动效果

CSS3新增很多实用的属性,特别是可以实现动画效果的animation属性,本文通过使用CSS3来实现一个类似于音乐频谱跳动效果。 在一个网站上看到“直播中”的提示标题,有趣的是文字之前有一个图表,是...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: