css 实现loding效果

最新推荐文章于 2024-08-14 12:22:11 发布

小康娜

最新推荐文章于 2024-08-14 12:22:11 发布

阅读量73

点赞数

分类专栏：工作文章标签： css css3 动画 vue.js javascript

本文链接：https://blog.csdn.net/xiaokangna/article/details/130412136

版权

工作专栏收录该内容

51 篇文章 0 订阅

订阅专栏

这段代码展示了一个使用纯CSS创建的页面加载动画，包括一个半透明的遮罩层和一个旋转的spinner。spinner通过border-color和border-radius结合animation实现3D旋转效果。

摘要由CSDN通过智能技术生成

<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);
    }
}