html页面加载转圈,纯css实现加载转圈样式 -尊龙游戏旗舰厅官网
不同的项目中对于等待加载时转圈圈的样式是不同的，有的是传统的转圈的gif图片，见得比较多的是将转圈圈的换成了可爱的图标。有时候项目中加入等待加载的图片会很违和，不符合美观，所以需要用css做一个。下面是一个纯css实现转圈样式的例子。
document.load-container {
background-color: #f1f1ea;
width: auto;
height: 700px;
position: relative;
overflow: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.loader {
font-size: 10px;
margin: 100px auto;
margin-top: 300px;
width: 1em;
height: 1em;
border-radius: 50%;
text-indent: -9999em;
position: relative;
animation: mymove 1.3s infinite linear;
-webkit-animation: mymove 1.5s infinite linear;
-webkit-transform: translatez(0);
-ms-transform: translatez(0);
transform: translatez(0);
}
@keyframes mymove {
0%,
100% {
box-shadow: 0 -3em 0 0.2em #46a4c9, 2em -2em 0 0em #46a4c9, 3em 0 0 -1em #46a4c9, 2em 2em 0 -1em #46a4c9, 0 3em 0 -1em #46a4c9, -2em 2em 0 -1em #46a4c9, -3em 0 0 -1em #46a4c9, -2em -2em 0 0 #46a4c9;
}
12.5% {
box-shadow: 0 -3em 0 0 #46a4c9, 2em -2em 0 0.2em #46a4c9, 3em 0 0 0 #46a4c9, 2em 2em 0 -1em #46a4c9, 0 3em 0 -1em #46a4c9, -2em 2em 0 -1em #46a4c9, -3em 0 0 -1em #46a4c9, -2em -2em 0 -1em #46a4c9;
}
25% {
box-shadow: 0 -3em 0 -0.5em #46a4c9, 2em -2em 0 0 #46a4c9, 3em 0 0 0.2em #46a4c9, 2em 2em 0 0 #46a4c9, 0 3em 0 -1em #46a4c9, -2em 2em 0 -1em #46a4c9, -3em 0 0 -1em #46a4c9, -2em -2em 0 -1em #46a4c9;
}
37.5% {
box-shadow: 0 -3em 0 -1em #46a4c9, 2em -2em 0 -1em #46a4c9, 3em 0em 0 0 #46a4c9, 2em 2em 0 0.2em #46a4c9, 0 3em 0 0em #46a4c9, -2em 2em 0 -1em #46a4c9, -3em 0em 0 -1em #46a4c9, -2em -2em 0 -1em #46a4c9;
}
50% {
box-shadow: 0 -3em 0 -1em #46a4c9, 2em -2em 0 -1em #46a4c9, 3em 0 0 -1em #46a4c9, 2em 2em 0 0em #46a4c9, 0 3em 0 0.2em #46a4c9, -2em 2em 0 0 #46a4c9, -3em 0em 0 -1em #46a4c9, -2em -2em 0 -1em #46a4c9;
}
62.5% {
box-shadow: 0 -3em 0 -1em #46a4c9, 2em -2em 0 -1em #46a4c9, 3em 0 0 -1em #46a4c9, 2em 2em 0 -1em #46a4c9, 0 3em 0 0 #46a4c9, -2em 2em 0 0.2em #46a4c9, -3em 0 0 0 #46a4c9, -2em -2em 0 -1em #46a4c9;
}
75% {
box-shadow: 0em -3em 0 -1em #46a4c9, 2em -2em 0 -1em #46a4c9, 3em 0em 0 -1em #46a4c9, 2em 2em 0 -1em #46a4c9, 0 3em 0 -1em #46a4c9, -2em 2em 0 0 #46a4c9, -3em 0em 0 0.2em #46a4c9, -2em -2em 0 0 #46a4c9;
}
87.5% {
box-shadow: 0em -3em 0 0 #46a4c9, 2em -2em 0 -1em #46a4c9, 3em 0 0 -1em #46a4c9, 2em 2em 0 -1em #46a4c9, 0 3em 0 -1em #46a4c9, -2em 2em 0 0 #46a4c9, -3em 0em 0 0 #46a4c9, -2em -2em 0 0.2em #46a4c9;
}
}
@-webkit-keyframes mymove
/*safari and chrome*/
{
0%,
100% {
box-shadow: 0 -3em 0 0.2em #46a4c9, 2em -2em 0 0em #46a4c9, 3em 0 0 -1em #46a4c9, 2em 2em 0 -1em #46a4c9, 0 3em 0 -1em #46a4c9, -2em 2em 0 -1em #46a4c9, -3em 0 0 -1em #46a4c9, -2em -2em 0 0 #46a4c9;
}
12.5% {
box-shadow: 0 -3em 0 0 #46a4c9, 2em -2em 0 0.2em #46a4c9, 3em 0 0 0 #46a4c9, 2em 2em 0 -1em #46a4c9, 0 3em 0 -1em #46a4c9, -2em 2em 0 -1em #46a4c9, -3em 0 0 -1em #46a4c9, -2em -2em 0 -1em #46a4c9;
}
25% {
box-shadow: 0 -3em 0 -0.5em #46a4c9, 2em -2em 0 0 #46a4c9, 3em 0 0 0.2em #46a4c9, 2em 2em 0 0 #46a4c9, 0 3em 0 -1em #46a4c9, -2em 2em 0 -1em #46a4c9, -3em 0 0 -1em #46a4c9, -2em -2em 0 -1em #46a4c9;
}
37.5% {
box-shadow: 0 -3em 0 -1em #46a4c9, 2em -2em 0 -1em #46a4c9, 3em 0em 0 0 #46a4c9, 2em 2em 0 0.2em #46a4c9, 0 3em 0 0em #46a4c9, -2em 2em 0 -1em #46a4c9, -3em 0em 0 -1em #46a4c9, -2em -2em 0 -1em #46a4c9;
}
50% {
box-shadow: 0 -3em 0 -1em #46a4c9, 2em -2em 0 -1em #46a4c9, 3em 0 0 -1em #46a4c9, 2em 2em 0 0em #46a4c9, 0 3em 0 0.2em #46a4c9, -2em 2em 0 0 #46a4c9, -3em 0em 0 -1em #46a4c9, -2em -2em 0 -1em #46a4c9;
}
62.5% {
box-shadow: 0 -3em 0 -1em #46a4c9, 2em -2em 0 -1em #46a4c9, 3em 0 0 -1em #46a4c9, 2em 2em 0 -1em #46a4c9, 0 3em 0 0 #46a4c9, -2em 2em 0 0.2em #46a4c9, -3em 0 0 0 #46a4c9, -2em -2em 0 -1em #46a4c9;
}
75% {
box-shadow: 0em -3em 0 -1em #46a4c9, 2em -2em 0 -1em #46a4c9, 3em 0em 0 -1em #46a4c9, 2em 2em 0 -1em #46a4c9, 0 3em 0 -1em #46a4c9, -2em 2em 0 0 #46a4c9, -3em 0em 0 0.2em #46a4c9, -2em -2em 0 0 #46a4c9;
}
87.5% {
box-shadow: 0em -3em 0 0 #46a4c9, 2em -2em 0 -1em #46a4c9, 3em 0 0 -1em #46a4c9, 2em 2em 0 -1em #46a4c9, 0 3em 0 -1em #46a4c9, -2em 2em 0 0 #46a4c9, -3em 0em 0 0 #46a4c9, -2em -2em 0 0.2em #46a4c9;
}
}
与50位技术专家面对面20年技术见证，附赠技术全景图总结
以上是尊龙游戏旗舰厅官网为你收集整理的html页面加载转圈,纯css实现加载转圈样式的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：