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

2017-6-7 16:49 来自本站原创 10,574 3 2
[摘要]

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

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

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

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

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

查看demo效果  DEMO

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

贴出主要代码如下:

html部分

<div class="wrap">
 <ul class="music">
 <li class="m1"></li>
 <li class="m2"></li>
 <li class="m3"></li>
 <li class="m1"></li>
 <li class="m2"></li>
 <li class="m3"></li>
 </ul>
 </div>

CSS部分

*{
 margin: 0;
 padding: 0;
 border: 0;
 }
 .wrap{
 width: 260px;
 height: 150px;
 margin:50px auto 0;
 background-color: rgba(0,0,0,.5);
 position: relative;
 }
 .wrap ul{
 position: absolute;
 bottom: 0px;
 display: inline-block;
 vertical-align: baseline;
 font-size: 0;
 }
 .wrap ul li{
 background-color: #fff;
 margin-left: 20px;
 display: inline-block;
 width: 20px;
 height: 120px;
 }
 .m1{
 -webkit-animation: .8s .1s living linear infinite backwards normal;
 animation: .8s .1s living linear infinite backwards normal;
 -webkit-animation-delay: -1.1s;
 }
 .m2{
 -webkit-animation: .8s .3s living linear infinite backwards normal;
 animation: .8s .3s living linear infinite backwards normal;
 -webkit-animation-delay: -1.3s;
 }
 .m3{
 -webkit-animation: .8s .6s living linear infinite backwards normal;
 animation: .8s .6s living linear infinite backwards normal;
 -webkit-animation-delay: -1.6s;
 }
 @-webkit-keyframes living{
 0%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:0 120px;transform-origin:0 120px}
 50%{-webkit-transform:scaleY(.3);transform:scaleY(.3);-webkit-transform-origin:0 120px;transform-origin:0 120px}
 100%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:0 120px;transform-origin:0 120px}
 }
 @keyframes living{
 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}
 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}
 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}
 }

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

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

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

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

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

      很厉害的感觉。

    2. 1年前 (2017-06-07) 沙发

      真的看不出是CSS3搞出来的,看来如果学会并灵活使用CSS3的话,还是很强大的

      • 飞鸟
        1年前 (2017-06-08)  地下1层

        @boke112导航: 特别是做成小尺寸的,后面搭配“直播中”三个字,感觉就是一张小的gif图片

    发表评论

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

    3 2 10,574
    Top