css3-扁平预加载动画效果

最新推荐文章于 2024-07-16 16:07:08 发布

正在修炼web的小芮

最新推荐文章于 2024-07-16 16:07:08 发布

阅读量61

点赞数

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

本文链接：https://blog.csdn.net/m0_71814235/article/details/126015429

版权

css3 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

html中body样式

<body>
    <section class="container">
        <span></span>
        <span></span>
        <span></span>
    </section>
</body>

css样式

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            /* 网格布局 */
            display: grid;
            justify-content: center;
            align-content: center;
            background-color: #fff;
        }
        .container{
            position: relative;
        }
        .container span{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            transform-origin: center center;
            border: 6px solid #b71c1c;
            border-radius: 50%;
        }
         /* 第1个圆，底边框设置透明 */
         .container span:nth-child(1){
            width: 100px;
            height: 100px;
            border-bottom: 6px solid transparent;
            animation: animate-max 2s linear infinite;
         }
          /* 第2个圆，上边框设置透明 */
          .container span:nth-child(2){
            width: 60px;
            height: 60px;
            border-top: 6px solid transparent;
            animation: animate 1s linear infinite;
          }
          /* 第3个圆，底边框设置透明 */
          .container span:nth-child(3){
            width: 20px;
            height: 20px;
            border-bottom: 6px solid transparent;
            animation: animate 1s linear infinite;
          }
          @keyframes animate{
            0%{
                transform: translate(-50%,-50%) rotateZ(0deg);
            }
            100%{
                transform: translate(-50%,-50%) rotateZ(360deg);
            }
          }
          @keyframes animate-max{
            0%{
                transform: translate(-50%,-50%) rotateZ(0deg);
            }
            100%{
                transform: translate(-50%,-50%) rotateZ(360deg);
            }
          }
    </style>