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

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

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

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

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

贴出主要代码如下：

HTML部分

CSS部分

完整代码

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