.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
转圈动画和省略号动画