html+css制作简单loading动画

最新推荐文章于 2023-12-22 10:06:15 发布

是酸酸吖！

最新推荐文章于 2023-12-22 10:06:15 发布

阅读量250

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/yan_suansuan/article/details/109527825

版权

html+css制作简单loading动画

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

body{
            height: 100vh;
            /* flex布局让盒子在主轴和中间轴居中，盒子就位于正中间 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .loading{
            position: relative;
            width: 190px;
            height: 190px;
            /* 让四个盒子grid布局 */
            display: grid;
            /* 设置二行二列的网格，并且列宽和行高都为80px */
            grid-template-columns: 80px 80px;
            grid-template-rows: 80px 80px;
            /* 间距为30px */
            gap: 30px;
            /* 每2s执行一次动画 */
            animation: rotate 2s infinite linear;
        }
        .loading div{
            /* 让div是圆形 */
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
        /* 设置每个div的颜色 */
        .loading div:nth-child(1){
            background-color:#19A68C ;
        }
        .loading div:nth-child(2){
            background-color:#F63D3A ;
        }
        .loading div:nth-child(3){
            background-color:#FDA543 ;
        }
        .loading div:nth-child(4){
            background-color:#193B48 ;
        }
        @keyframes rotate{
            /* 动画每10%转动45度，并且间距有变化 */
            0%{
                width: 190px;
                height: 190px;
                gap: 30px;
                transform: rotate(0deg);
            }
            10%{
                width: 160px;
                height: 160px;
                gap: 0px;
                transform: rotate(45deg);
            }
            20%{
                width: 190px;
                height: 190px;
                gap: 30px;
                transform: rotate(90deg);
            }
            /* 每90度停顿一下 */
            25%{
                width: 190px;
                height: 190px;
                gap: 30px;
                transform: rotate(90deg);
            }
            35%{
                width: 160px;
                height: 160px;
                gap: 0px;
                transform: rotate(135deg);
            }
            45%{
                width: 190px;
                height: 190px;
                gap: 30px;
                transform: rotate(180deg);
            }
            50%{
                width: 190px;
                height: 190px;
                gap: 30px;
                transform: rotate(180deg);
            }
            60%{
                width: 160px;
                height: 160px;
                gap: 0px;
                transform: rotate(225deg);
            }
            70%{
                width: 190px;
                height: 190px;
                gap: 30px;
                transform: rotate(270deg);
            }
            75%{
                width: 190px;
                height: 190px;
                gap: 30px;
                transform: rotate(270deg);
            }
            85%{
                width: 160px;
                height: 160px;
                gap: 0px;
                transform: rotate(315deg);
            }
            95%{
                width: 190px;
                height: 190px;
                gap: 30px;
                transform: rotate(360deg);
            }
            100%{
                width: 190px;
                height: 190px;
                gap: 30px;
                transform: rotate(360deg);
            }
        }