CSS入门案例（1）：实现等待Loading效果

最新推荐文章于 2025-02-11 11:15:40 发布

Rengarhunt

最新推荐文章于 2025-02-11 11:15:40 发布

阅读量382

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/Rengarhunt/article/details/109906608

版权

css 专栏收录该内容

18 篇文章

订阅专栏

在这里插入图片描述

	<div class="loadbox">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="loadbox">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>

		*{margin: 0;padding: 0;background: black}
        .loadbox{
            width: 40px;
            height: 40px;
            position: absolute;
            margin-top: -42px;
            margin-left: -42px;
            top: 50%;left: 50%;
            background:rgba(255, 255, 255, 0);
            }
        .loadbox p{
            width: 12px;
            height: 12px;
            background: white;
            border-radius: 50%;
            position: absolute;
            animation: load 1.6s ease infinite;
            }
        .loadbox p:nth-of-type(1){left: 0;top: 0;}
        .loadbox p:nth-of-type(2){top: 0;right: 0;}
        .loadbox p:nth-of-type(3){bottom: 0;left: 0;}
        .loadbox p:nth-of-type(4){bottom: 0;right: 0;}
        .loadbox:nth-of-type(2){transform: rotate(45deg);}
        @keyframes load{
            0%{
                transform: scale(1.2);
                opacity: 1;
            }
            100%{
                transform: scale(.3);
                opacity: 0.5;
            }
        }
        .loadbox:nth-of-type(1) p:nth-of-type(1){animation-delay: -0.2s;}
        .loadbox:nth-of-type(2) p:nth-of-type(1){animation-delay: -0.4s;}
        .loadbox:nth-of-type(1) p:nth-of-type(2){animation-delay: -0.6s;}
        .loadbox:nth-of-type(2) p:nth-of-type(2){animation-delay: -0.8s;}
        .loadbox:nth-of-type(1) p:nth-of-type(4){animation-delay: -1.0s;}
        .loadbox:nth-of-type(2) p:nth-of-type(4){animation-delay: -1.2s;}
        .loadbox:nth-of-type(1) p:nth-of-type(3){animation-delay: -1.4s;}
        .loadbox:nth-of-type(2) p:nth-of-type(3){animation-delay: -1.6s;}