纯html+css3书写跳动的音符

1、新建html文档。

2、书写hmtl代码。

<div class="demo-music">

    <div class="music">

      <ul id="waves" class="movement">

        <li class="li1"><span class="ani-li"></span></li>

        <li class="li2"><span class="ani-li"></span></li>

        <li class="li3"><span class="ani-li"></span></li>

        <li class="li4"><span class="ani-li"></span></li>

        <li class="li5"><span class="ani-li"></span></li>

        <li class="li6"><span class="ani-li"></span></li>

      </ul>

      <div class="music-state"></div>

    </div>

    </div>

3、初始化css代码。

<style>

*{ margin: 0; padding: 0; list-style: none; }

body{ background-color: #efefef; width : 100%; height : 100%; margin : 0; padding : 0; }

</style>

4、书写css代码。

.demo-music { position: absolute; width: 100%; height: 200px; top: 120px; zoom: 1.5; }

.demo-music .music { width: 80px; height: 50px; top: 50%; left: 50%; -webkit-transform: translate(-40px, -25px); transform: translate(-40px, -25px); position: absolute; }

.demo-music #waves { width: 80px; height: 50px; position: absolute; top: 12px; left: 12px; }

.demo-music #waves li { position: relative; float: left; height: 100%; width: 12%; overflow: hidden; margin-right: 1px; }

.demo-music #waves li span { position: absolute; bottom: 0; display: block; height: 100%; width: 100px; background: radial-gradient(transparent 50%, rgba(255, 162, 162, 0.9) 100%); }

.demo-music #waves .li1 span { animation: waves 0.6s linear 0s infinite alternate; -webkit-animation: waves 0.6s linear 0s infinite alternate; }

.demo-music #waves .li2 span { animation: waves 0.9s linear 0s infinite alternate; -webkit-animation: waves 0.9s linear 0s infinite alternate; }

.demo-music #waves .li3 span { animation: waves 1s linear 0s infinite alternate; -webkit-animation: waves 1s linear 0s infinite alternate; }

.demo-music #waves .li4 span { animation: waves 0.8s linear 0s infinite alternate; -webkit-animation: waves 0.8s linear 0s infinite alternate; }

.demo-music #waves .li5 span { animation: waves 0.7s linear 0s infinite alternate; -webkit-animation: waves 0.7s linear 0s infinite alternate; }

.demo-music #waves .li6 span { animation: waves 0.5s linear 0s infinite alternate; -webkit-animation: waves 0.5s linear 0s infinite alternate; }

@-webkit-keyframes waves {  10% { height: 20%;} 20% { height: 60%;} 40% { height: 40%;} 50% { height: 100%;} 100% { height: 50%;}}

@keyframes waves {  10% { height: 20%;} 20% { height: 60%;} 40% { height: 40%;} 50% { height: 100%;} 100% { height: 50%;}}

5、代码整体结构。

6、查看效果。