<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style> * { margin: 0; padding: 0; } div { display: inline-block; height: 30px; line-height: 40px; text-align: center; position: relative; vertical-align: bottom; } span { display: inline-block; width: 3px; margin-bottom: 0; background-color: red; margin-right: -12px; } .line1 { // alternate意为应该轮流反向播放动画 animation: line 0.6s infinite ease-in-out alternate; } .line2 { animation: line 0.6s 0.2s infinite ease-in-out alternate; } .line3 { animation: line 0.6s 0.4s infinite ease-in-out alternate; } .line4 { animation: line 0.6s 0.6s infinite ease-in-out alternate; } @keyframs line { from { height: 0; } to { height: 20px; } } @-webkit-keyframes line { from { height: 0; } to { height: 20px; } } </style>
</head>

<body>
    <div>
        <span class="line1"></span>
        <span class="line2"></span>
        <span class="line3"></span>
        <span class="line4"></span>
    </div>
</body>

</html>

 

CSS3使用animation实现一个类音量跳动加载图标
标签: