<!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实现一个类音量跳动加载图标