parent
b71fe66e20
commit
d18e17a68d
@ -1 +1,147 @@
|
||||
#preloadingAnimation{position:fixed;left:0;top:0;height:100%;width:100%;background:#ffffff;user-select:none;z-index: 9999;overflow: hidden}.lds-roller{display:inline-block;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:32px 32px;}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#13c2c2;margin:-3px 0 0 -3px;}.lds-roller div:nth-child(1){animation-delay:-0.036s;}.lds-roller div:nth-child(1):after{top:50px;left:50px;}.lds-roller div:nth-child(2){animation-delay:-0.072s;}.lds-roller div:nth-child(2):after{top:54px;left:45px;}.lds-roller div:nth-child(3){animation-delay:-0.108s;}.lds-roller div:nth-child(3):after{top:57px;left:39px;}.lds-roller div:nth-child(4){animation-delay:-0.144s;}.lds-roller div:nth-child(4):after{top:58px;left:32px;}.lds-roller div:nth-child(5){animation-delay:-0.18s;}.lds-roller div:nth-child(5):after{top:57px;left:25px;}.lds-roller div:nth-child(6){animation-delay:-0.216s;}.lds-roller div:nth-child(6):after{top:54px;left:19px;}.lds-roller div:nth-child(7){animation-delay:-0.252s;}.lds-roller div:nth-child(7):after{top:50px;left:14px;}.lds-roller div:nth-child(8){animation-delay:-0.288s;}.lds-roller div:nth-child(8):after{top:45px;left:10px;}#preloadingAnimation .load-tips{color: #13c2c2;font-size:2rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:80px;text-align:center;width:400px;height:64px;} @keyframes lds-roller{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}
|
||||
/* 定义页面预加载动画的样式 */
|
||||
#preloadingAnimation{
|
||||
/* 设置预加载动画的定位方式和位置 */
|
||||
position:fixed;
|
||||
left:0;top:0;
|
||||
/* 设置预加载动画的高度和宽度 */
|
||||
height:100%;
|
||||
width:100%;
|
||||
/* 设置预加载动画的背景颜色 */
|
||||
background:#ffffff;
|
||||
/* 禁止文本选择 */
|
||||
user-select:none;
|
||||
/* 设置预加载动画的层级关系 */
|
||||
z-index: 9999;
|
||||
/* 隐藏溢出的内容 */
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
/* 定义加载动画的样式 */
|
||||
.lds-roller{
|
||||
/* 设置加载动画的显示方式和定位方式 */
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
/* 设置加载动画的位置 */
|
||||
left:50%;
|
||||
top:50%;
|
||||
/* 设置加载动画的尺寸 */
|
||||
width:64px;
|
||||
height:64px;
|
||||
/* 将加载动画居中显示 */
|
||||
transform:translate(-50%,-50%);
|
||||
}
|
||||
|
||||
/* 定义加载动画中每个部分的样式 */
|
||||
.lds-roller div{
|
||||
/* 设置加载动画的动画效果 */
|
||||
animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;
|
||||
/* 设置加载动画的变换原点 */
|
||||
transform-origin:32px 32px;
|
||||
}
|
||||
|
||||
/* 定义加载动画中每个部分的伪元素样式 */
|
||||
.lds-roller div:after{
|
||||
/* 设置伪元素的内容和显示方式 */
|
||||
content:" ";display:block;
|
||||
/* 设置伪元素的定位方式 */
|
||||
position:absolute;
|
||||
/* 设置伪元素的尺寸 */
|
||||
width:6px;
|
||||
height:6px;
|
||||
/* 设置伪元素的形状 */
|
||||
border-radius:50%;
|
||||
/* 设置伪元素的背景颜色 */
|
||||
background:#13c2c2;
|
||||
/* 设置伪元素的位置 */
|
||||
margin:-3px 0 0 -3px;
|
||||
}
|
||||
|
||||
/* 定义加载动画中每个部分的动画延迟时间 */
|
||||
.lds-roller div:nth-child(1){
|
||||
animation-delay:-0.036s;
|
||||
}
|
||||
.lds-roller div:nth-child(2){
|
||||
animation-delay:-0.072s;
|
||||
}
|
||||
.lds-roller div:nth-child(3){
|
||||
animation-delay:-0.108s;
|
||||
}
|
||||
.lds-roller div:nth-child(4){
|
||||
animation-delay:-0.144s;
|
||||
}
|
||||
.lds-roller div:nth-child(5){
|
||||
animation-delay:-0.18s;
|
||||
}
|
||||
.lds-roller div:nth-child(6){
|
||||
animation-delay:-0.216s;
|
||||
}
|
||||
.lds-roller div:nth-child(7){
|
||||
animation-delay:-0.252s;
|
||||
}
|
||||
.lds-roller div:nth-child(8){
|
||||
animation-delay:-0.288s;
|
||||
}
|
||||
|
||||
/* 定义加载动画中每个部分的伪元素的位置 */
|
||||
.lds-roller div:nth-child(1):after{
|
||||
top:50px;
|
||||
left:50px;
|
||||
}
|
||||
.lds-roller div:nth-child(2):after{
|
||||
top:54px;
|
||||
left:45px;
|
||||
}
|
||||
.lds-roller div:nth-child(3):after{
|
||||
top:57px;
|
||||
left:39px;
|
||||
}
|
||||
.lds-roller div:nth-child(4):after{
|
||||
top:58px;
|
||||
left:32px;
|
||||
}
|
||||
.lds-roller div:nth-child(5):after{
|
||||
top:57px;
|
||||
left:25px;
|
||||
}
|
||||
.lds-roller div:nth-child(6):after{
|
||||
top:54px;
|
||||
left:19px;
|
||||
}
|
||||
.lds-roller div:nth-child(7):after{
|
||||
top:50px;
|
||||
left:14px;
|
||||
}
|
||||
.lds-roller div:nth-child(8):after{
|
||||
top:45px;left:10px;
|
||||
}
|
||||
|
||||
/* 定义预加载动画中的加载提示样式 */
|
||||
#preloadingAnimation .load-tips{
|
||||
/* 设置加载提示的颜色和字体大小 */
|
||||
color: #13c2c2;font-size:2rem;
|
||||
/* 设置加载提示的定位方式 */
|
||||
position:absolute;
|
||||
/* 设置加载提示的位置 */
|
||||
left:50%;
|
||||
top:50%;
|
||||
/* 将加载提示居中显示 */
|
||||
transform:translate(-50%,-50%);
|
||||
/* 设置加载提示的外边距 */
|
||||
margin-top:80px;
|
||||
/* 设置加载提示的文本对齐方式 */
|
||||
text-align:center;
|
||||
/* 设置加载提示的宽度和高度 */
|
||||
width:400px;
|
||||
height:64px;
|
||||
}
|
||||
|
||||
/* 定义加载动画的动画关键帧 */
|
||||
@keyframes lds-roller{
|
||||
/* 设置动画开始时的旋转角度 */
|
||||
0%{transform:rotate(0deg);
|
||||
}
|
||||
/* 设置动画结束时的旋转角度 */
|
||||
100%{
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1 +1,17 @@
|
||||
<div id="preloadingAnimation"><div class=lds-roller><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div class=load-tips>Loading</div></div>
|
||||
<!-- 预加载动画容器 -->
|
||||
<div id="preloadingAnimation">
|
||||
<!-- lds-roller类用于定义加载动画的样式 -->
|
||||
<div class="lds-roller">
|
||||
<!-- 以下多个div元素共同构成一个滚动加载的动画效果 -->
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<!-- 加载提示文本 -->
|
||||
<div class="load-tips">Loading</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in new issue