给页面添加loading动画

最新推荐文章于 2025-05-14 09:21:33 发布

70kggg

最新推荐文章于 2025-05-14 09:21:33 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：有点意思前端之路

本文链接：https://blog.youkuaiyun.com/weixin_42617604/article/details/88752863

前端之路同时被 2 个专栏收录

34 篇文章

订阅专栏

有点意思

6 篇文章

订阅专栏

博客展示了HTML内的代码和CSS代码，实现了加载动画效果，并提供了最终效果的预览链接（https://70kg111.github.io/loading-animation/index.html），聚焦于前端开发技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html内的代码：

<div class="loading"></div>

css代码：


.loading{
    width: 300px;
    height: 300px;
    border:1px solid black;
    position: relative;
}

.loading::before,.loading::after{
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    background: black;
    border-radius: 50%;
    top:0;      
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;   /*上下左右都为0，再加上margin:auto; 就是自动居中*/
    animation: s 1.5s linear infinite;  /*加上s状态，状态开始到结束为1.5s*/
}

.loading::after{
    animation-delay: 0.75s;     /*第二个圆出现的时间*/
}

@keyframes s{
    0%{             /*初始状态*/
        width: 0px;
        height: 0px;
        opacity: 1; /*透明度*/
    }
    100%{           /*结束状态*/
        width: 100px;
        height: 100px;
        opacity: 0;
    }
}

最终效果预览：

点击预览效果链接（https://70kg111.github.io/loading-animation/index.html）