纯css 制作音谱跳动效果

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

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

查看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:0120px;transform-origin:0 120px}
 50%{-webkit-transform:scaleY(.3);transform:scaleY(.3);-webkit-transform-origin:0120px;transform-origin:0 120px}
 100%{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:0120px;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新属性，将更高效、更绚丽的前端页面呈现给我们。

文章出自 雅兮网  http://www.iyaxi.com/2017-06-07/1438.html