本文主要包含五十音谱图,尤克里里音谱,钢琴音谱怎么看,吉他单音谱,音谱大全等相关知识,智欣约的博客希望在学习及工作中可以帮助到您
在一个网站上看到“直播中”的提示标题，有趣的是文字之前有一个图表，是一个上下跳动的类似于音乐的效果，起初笔者以为是一个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