You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
3.3 KiB
148 lines
3.3 KiB
/* 定义页面预加载动画的样式 */
|
|
#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);
|
|
}
|
|
}
|