html音乐跳动的线,利用CSS3制作跳动音乐频谱跳动效果

[摘要]

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

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

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

查看demo效果  DEMO

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

贴出主要代码如下：

html部分

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 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！