Html
    Css
    Js

    
                        
.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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

等待动画两例

更新时间:2022-12-04 23:40:20

转圈动画和省略号动画

0