css3正在加载中

最新推荐文章于 2024-08-19 12:23:25 发布

qq_27449993

最新推荐文章于 2024-08-19 12:23:25 发布

阅读量1.5k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_27449993/article/details/90288395

版权

前端专栏收录该内容

113 篇文章 2 订阅

订阅专栏

本文详细介绍了如何使用CSS3创建动态的加载动画，包括关键帧动画、过渡效果和 transform 属性的应用，帮助开发者提升用户体验。

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

<div id="loading1">
    <div class="demo1"></div>
    <div class="demo1"></div>
    <div class="demo1"></div>
    <div class="demo1"></div>
    <div class="demo1"></div>
    <div class="demo1"></div>
    <div class="demo1"></div>
    <div class="demo1"></div>
</div>

 #loading1{
        width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
        }
        .demo1{
            width:10px;
            height: 10px;
            border-radius: 50%;
            background-color: white;
            position: absolute;
            animation: de 800ms ease infinite;
        }
        @keyframes de {
            0%,100%{
                transform: scale(1);
            }
            30%{
                transform: scale(1.5);
            }
        }
        .demo1:nth-child(1){
            left: 50%;
            top: 10px;
            animation-delay: 0ms;
        }
        .demo1:nth-child(2){
            top: 25%;
            left:75%;
            animation-delay: 100ms;
        }
        .demo1:nth-child(3){
            top: 50%;
            right: 0;
            animation-delay: 200ms;

        }
        .demo1:nth-child(4){
            top:75%;
            left:75%;
            animation-delay: 300ms;
        }
        .demo1:nth-child(5){
            bottom: 0px;
            left: 50%;
            animation-delay: 400ms;
        }
        .demo1:nth-child(6){
            top:75%;
            left: 25%;
            animation-delay: 500ms;
        }
        .demo1:nth-child(7){
            left: 10px;
            top: 50%;
            animation-delay: 600ms;
        }
        .demo1:nth-child(8){
            top: 25%;
            left: 25%;
            animation-delay: 700ms;
        }