Html
    Css
    Js

    
                        
/*加载动画*/
.loading {
	position:absolute;
	width:100%;
	height:100%;
	background:white;
	z-index:100;
	display:flex;
	justify-content:center;
	align-items:center;
}
.loading > div {
	width:30px;
	height:30px;
	background:#66ccff;
	border-radius:100%;
	margin:5px;
	animation-name:example;
	animation-duration:1s;
	animation-iteration-count:infinite;
}
.loading .loader1 {
	-webkit-animation-delay:0.2s;
	animation-delay:0.2s;
}
.loading .loader2 {
	-webkit-animation-delay:0.5s;
	animation-delay:0.5s;
}
.loading .loader3 {
	-webkit-animation-delay:1s;
	animation-delay:1s;
}
@keyframes example {
	0%,80%,100% {
	-webkit-transform:scale(0.0)
}
50% {
	-webkit-transform:scale(1.0)
}
}

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

html加载动画

更新时间:2021-10-13 08:07:18

0