纯css实现音符跳动效果
2020-11-05 本文已影响0人
八妹sss
效果如图：
image.png
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯css实现音符跳动效果</title>
<style>
.voice {
display: flex;
align-items: flex-end;
justify-content: center;
height: 100%;
}
.voice i {
display: inline-block;
border-left: 2px solid #10ea14;
margin: 0 1px;
position: relative;
}
i.first {
height: 8px;
animation: first 0.5s linear 0s infinite alternate;
}
i.second {
height: 4px;
animation: second 1s linear 0s infinite alternate;
}
i.three {
height: 6px;
animation: three 0.8s linear 0s infinite alternate;
}
i.four {
height: 12px;
animation: four 0.6s linear 0s infinite alternate;
}
@keyframes first {
0% {
height: 4px;
}
50% {
height: 8px;
}
100% {
height: 10px;
}
}
@keyframes second {
0% {
height: 12px;
}
50% {
height: 9px;
}
100% {
height: 7px;
}
}
@keyframes three {
0% {
height: 14px;
}
50% {
height: 12px;
}
100% {
height: 10px;
}
}
@keyframes four {
0% {
height: 10px;
}
50% {
height: 8px;
}
100% {
height: 5px;
}
}
</style>
</head>
<body>
<span class="voice">
<i class="first"></i>
<i class="second"></i>
<i class="three"></i>
<i class="four"></i>
</span>
</body>
</html>
