<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .music-icon { text-align: right; padding-right: 50px; } span { display: inline-block; width: 2px; height: 120px; margin: 0 2px; background: red; } .one { height: 120px; -webkit-animation:waves 0.6s linear 0s infinite; } .two { height: 40px; -webkit-animation:waves 0.9s linear 0s infinite; } .three { height: 80px; -webkit-animation:waves 1s linear 0s infinite; } .four { height: 40px; -webkit-animation:waves 0.8s linear 0s infinite; } .paused { animation-play-state:paused; -webkit-animation-play-state:paused; } .playing { animation-play-state: running; -webkit-animation-play-state: running; } @-webkit-keyframes waves { 20% { height: 20px; } 40% { height: 40px; } 60% { height: 60px; } 80% { height: 80px; } 10% { height: 120px; } } </style> </head> <body> <div class="music-icon-animate "><span class="one playing"></span><span class="two playing"></span><span class="three playing"></span><span class="four playing"></span></div> </body> </html>
2019-03-08 css3制作音乐心率跳动
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...