直播css小动画
今天写页面的时候 UI出了一个icon动画需求,我本以为这个是要ui出一个gif图的,结果她让我写个动画,本来向怼她的,但是转念一想我也没做过这样的动画,就试试呗!
大概就是这么个玩意儿:
上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.body {
width: 20px;
height: 20px;
background-color: #aaa;
justify-content: space-between;
display: flex;
}
.box {
width: 4px;
height:20px;
background-color: #eee;
border-radius: 4px;
}
.move1 {
transform: scaleY(0.2);
animation: mymove1 0.7s 0.1s infinite linear alternate;
}
.move2 {
transform: scaleY(1);
animation: mymove2 0.7s 0.4s infinite linear alternate;
}
.move3 {
transform: scaleY(0.1);
animation: mymove3 0.7s 0.4s infinite linear alternate;
}
@keyframes mymove1 {
0% {
transform: scaleY(0.2);
}
100% {
transform: scaleY(1);
}
}
@keyframes mymove2 {
0% {
transform: scaleY(1);
}
100% {
transform: scaleY(0.3);
}
}
@keyframes mymove3 {
0% {
transform: scaleY(0.1);
}
100% {
transform: scaleY(1);
}
}
</style>
</head>
<body>
<div class="body">
<div class="box move1"></div>
<div class="box move2"></div>
<div class="box move3"></div>
</div>
</body>
</html>