.demo {
position:absolute;
width:50%;
height:200px;
background:#2aa198;
animation:move 1s linear infinite alternate;
}
@keyframes move {
from {
left:0
}
to {
left:50%
}
}.wait {
opacity:0.5;
cursor:default;
pointer-events:none;
}
.wait:before {
content:'';
display:inline-block;
width:20px;
height:20px;
margin-right:2px;
color:lightblue;
border:2px solid lightblue;
border-radius:50%;
vertical-align:-10%;
clip-path:polygon(0% 0%,100% 0%,100% 30%,0% 30%);
animation:rotate 1s linear infinite;
}
@keyframes rotate {
from {
transform:rotatez(0deg);
}
to {
transform:rotatez(360deg);
}
}@keyframes wait {
0%,100% {
content:'';
}
25% {
content:' ?';
}
50% {
content:' ? ?';
}
75% {
content:' ? ? ?';
}
}.wait2::after {
content:'';
animation:wait 2s linear infinite;
}
更新时间:2022-12-04 23:40:20
转圈动画和省略号动画