CSS3新增很多实用的属性,特别是可以实现动画效果的animation属性,本文通过使用CSS3来实现一个类似于音乐频谱跳动效果。
在一个网站上看到“直播中”的提示标题,有趣的是文字之前有一个图表,是一个上下跳动的类似于音乐的效果,起初笔者以为是一个gif图片,准备保存下来留用。但审查元素之后发现这是通过CSS3纯代码实现的,顿时觉得很强大,于是就扒下代码研究了一番。
通过CSS3新增的动画属性animation,经过一番配置之后可以得到类似音乐频谱跳动的效果。
如果只是作为一个“图标”效果的话,这样做有些小题大做了,一张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;
- bottombottom: 0px;
- display: inline-block;
- vertical-align: baselinebaseline;
- 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}
- }
完整代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>css3制作跳动音乐频谱跳动效果</title>
- <meta name="keywords" content="css3"/>
- <meta name="description" content="利用css3制作音乐频谱跳动效果" />
- <style type="text/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}
- }
- </style>
- </head>
- <body>
- <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>
- </body>
- </html>
以上就是本文的全部内容了,不得不说CSS3真的非常强大,想要掌握不下功夫是不行的。另外也希望国内的前端工程师们多多使用CSS3新属性,将更高效、更绚丽的前端页面呈现给我们。
- 我的微信
- 微信扫一扫
-
- 我的微博
- 微博扫一扫
-
评论