<div class="pc_mask">
<div class="spinner"></div>
</div>
.pc_mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
touch-action: none;
background: rgba(255, 255, 255, 0.8);
}
/* spinner 动画样式 */
.pc_mask > .spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid #33a7ff;
border-top-color: #fff;
animation: spinner-rotate .8s ease-in-out infinite; /* 动画属性 */
}
/* 动画关键帧 */
@keyframes spinner-rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
css to achieve loding effect
Guess you like
Origin blog.csdn.net/xiaokangna/article/details/130412136
Recommended
Ranking