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

王小优
王小优
王小优
231
文章
0
评论
2015年10月31日 评论 1,638 5099字阅读16分59秒

CSS3新增很多实用的属性,特别是可以实现动画效果的animation属性,本文通过使用CSS3来实现一个类似于音乐频谱跳动效果。

在一个网站上看到“直播中”的提示标题,有趣的是文字之前有一个图表,是一个上下跳动的类似于音乐的效果,起初笔者以为是一个gif图片,准备保存下来留用。但审查元素之后发现这是通过CSS3纯代码实现的,顿时觉得很强大,于是就扒下代码研究了一番。

通过CSS3新增的动画属性animation,经过一番配置之后可以得到类似音乐频谱跳动的效果。

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

如果只是作为一个“图标”效果的话,这样做有些小题大做了,一张gif可以搞定的事情没必要大费周章写CSS。不过这却又是一个特别好的案例,我们可以通过它来对CSS3动画属性做进一步的了解,毕竟目前CSS3在国内的使用程度还不算太高。

贴出主要代码如下:

HTML部分

  1. <div class="wrap">
  2. <ul class="music">
  3. <li class="m1"></li>
  4. <li class="m2"></li>
  5. <li class="m3"></li>
  6. <li class="m1"></li>
  7. <li class="m2"></li>
  8. <li class="m3"></li>
  9. </ul>
  10. </div>

CSS部分

  1. *{
  2. margin: 0;
  3. padding: 0;
  4. border: 0;
  5. }
  6. .wrap{
  7. width260px;
  8. height150px;
  9. margin:50px auto 0;
  10. background-color: rgba(0,0,0,.5);
  11. positionrelative;
  12. }
  13. .wrap ul{
  14. positionabsolute;
  15. bottombottom0px;
  16. displayinline-block;
  17. vertical-alignbaselinebaseline;
  18. font-size: 0;
  19. }
  20. .wrap ul li{
  21. background-color#fff;
  22. margin-left20px;
  23. displayinline-block;
  24. width20px;
  25. height120px;
  26. }
  27. .m1{
  28. -webkit-animation: .8s .1s living linear infinite backwards normal;
  29. animation: .8s .1s living linear infinite backwards normal;
  30. -webkit-animation-delay: -1.1s;
  31. }
  32. .m2{
  33. -webkit-animation: .8s .3s living linear infinite backwards normal;
  34. animation: .8s .3s living linear infinite backwards normal;
  35. -webkit-animation-delay: -1.3s;
  36. }
  37. .m3{
  38. -webkit-animation: .8s .6s living linear infinite backwards normal;
  39. animation: .8s .6s living linear infinite backwards normal;
  40. -webkit-animation-delay: -1.6s;
  41. }
  42. @-webkit-keyframes living{
  43. 0%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:0 120px;transform-origin:0 120px}
  44. 50%{-webkit-transform:scaleY(.3);transform:scaleY(.3);-webkit-transform-origin:0 120px;transform-origin:0 120px}
  45. 100%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:0 120px;transform-origin:0 120px}
  46. }
  47. @keyframes living{
  48. 0%{-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:0 120px;-ms-transform-origin:0 120px;transform-origin:0 120px}
  49. 50%{-webkit-transform:scaleY(.3);-ms-transform:scaleY(.3);transform:scaleY(.3);-webkit-transform-origin:0 120px;-ms-transform-origin:0 120px;transform-origin:0 120px}
  50. 100%{-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:0 120px;-ms-transform-origin:0 120px;transform-origin:0 120px}
  51. }

完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>css3制作跳动音乐频谱跳动效果</title>
  6.     <meta name="keywords" content="css3"/>
  7.     <meta name="description" content="利用css3制作音乐频谱跳动效果" />
  8.     <style type="text/css">
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             border: 0;
  13.         }
  14.         .wrap{
  15.             width: 260px;
  16.             height: 150px;
  17.             margin:50px auto 0;
  18.             background-color: rgba(0,0,0,.5);
  19.             position: relative;
  20.         }
  21.         .wrap ul{
  22.             position: absolute;
  23.             bottom: 0px;
  24.             display: inline-block;
  25.             vertical-align: baseline;
  26.             font-size: 0;
  27.         }
  28.         .wrap ul li{
  29.             background-color: #fff;
  30.             margin-left: 20px;
  31.             display: inline-block;
  32.             width: 20px;
  33.             height: 120px;
  34.         }
  35.         .m1{
  36.             -webkit-animation: .8s .1s living linear infinite backwards normal;
  37.             animation: .8s .1s living linear infinite backwards normal;
  38.             -webkit-animation-delay: -1.1s;
  39.         }
  40.         .m2{
  41.             -webkit-animation: .8s .3s living linear infinite backwards normal;
  42.             animation: .8s .3s living linear infinite backwards normal;
  43.             -webkit-animation-delay: -1.3s;
  44.         }
  45.         .m3{
  46.             -webkit-animation: .8s .6s living linear infinite backwards normal;
  47.             animation: .8s .6s living linear infinite backwards normal;
  48.             -webkit-animation-delay: -1.6s;
  49.         }
  50.         @-webkit-keyframes living{
  51.             0%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:0 120px;transform-origin:0 120px}
  52.             50%{-webkit-transform:scaleY(.3);transform:scaleY(.3);-webkit-transform-origin:0 120px;transform-origin:0 120px}
  53.             100%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:0 120px;transform-origin:0 120px}
  54.         }
  55.         @keyframes living{
  56.             0%{-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:0 120px;-ms-transform-origin:0 120px;transform-origin:0 120px}
  57.             50%{-webkit-transform:scaleY(.3);-ms-transform:scaleY(.3);transform:scaleY(.3);-webkit-transform-origin:0 120px;-ms-transform-origin:0 120px;transform-origin:0 120px}
  58.             100%{-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:0 120px;-ms-transform-origin:0 120px;transform-origin:0 120px}
  59.         }
  60.     </style>
  61. </head>
  62. <body>
  63.     <div class="wrap">
  64.         <ul class="music">
  65.             <li class="m1"></li>
  66.             <li class="m2"></li>
  67.             <li class="m3"></li>
  68.             <li class="m1"></li>
  69.             <li class="m2"></li>
  70.             <li class="m3"></li>
  71.         </ul>
  72.     </div>
  73. </body>
  74. </html>

以上就是本文的全部内容了,不得不说CSS3真的非常强大,想要掌握不下功夫是不行的。另外也希望国内的前端工程师们多多使用CSS3新属性,将更高效、更绚丽的前端页面呈现给我们。

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
利用animation动画实现呼吸灯效果 CSS3

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

阿里云看到其Banner上的一个呼吸灯效果,利用animation来实现的动画效果。 在阿里云看到其Banner上的一个呼吸灯效果,感觉非常具有科技感,看了下源码,原来只是一个CSS3效果,利用ani...
用CSS3给按钮添加类似雷达扫光效果 CSS3

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

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

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

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

发表评论

匿名网友 填写信息

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