Html
    Css
    Js

    
                        
div {
	width:100%;
	text-align:center;
	padding-top:30px;
	box-sizing:border-box;
}
.box {
	width:30px;
	height:30px;
	display:inline-block;
	border:3px solid rgba(0,0,0,0.2);
	border-left-color:#333;
	border-radius:50%;
	animation:rota 1s linear infinite;
}
@-webkit-keyframes rota {
	0% {
	transform:rotate(0deg);
}
100% {
	transform:rotate(360deg);
}
}@-webkit-keyframes rota2 {
	0% {
	transform:rotate3d(0,0,1,0deg);
}
100% {
	transform:rotate3d(0,0,1,360deg);
}
}.box2 {
	display:inline-block;
	width:36px;
	height:36px;
}
.box2 svg {
	width:100%;
	height:100%;
	animation:rota2 1s steps(12,end) infinite;
}

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

简约css加载动画

更新时间:2020-04-01 08:36:10

0