使用sass预处理器编写loding动画

最新推荐文章于 2024-05-21 21:14:20 发布

chenjinyu_lxl

最新推荐文章于 2024-05-21 21:14:20 发布

阅读量162

点赞数 1

文章标签： css css3

本文链接：https://blog.csdn.net/chenjinyu_lxl/article/details/105417398

版权

loding动画

    <!-- loading条型动画界面  -->
    <div class="loading">
        <div class="loading-box">
            <!-- 加载条 -->
            <div class="loading-line"></div>
            <div class="loading-line"></div>
            <div class="loading-line"></div>
            <div class="loading-line"></div>
            <div class="loading-line"></div>
            <div class="loading-line"></div>
            <div class="loading-line"></div>
            <div class="loading-line"></div>
            <div class="loading-line"></div>
            <div class="loading-line"></div>
            <div class="loading-line"></div>
            <div class="loading-line"></div>
        </div>
    </div>

.loading{
    // 大盒子居中
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    .loading-box{
        width: 100px;
        height: 100px;
        // 针对其定位
        position: relative;
        .loading-line{
            // 12个loading-line
            position: absolute;
            width: 100%;
            height: 100%;
            &::before{
                content: '';
                display: block;
                width: 5%;
                height: 40%;
                background-color: #333;
                margin: auto;
                border-radius: 5px;
            }        
        }
        // 12个加载条每一个加载条累计偏移30度
        // 12个伪类，每一个伪类延迟.1s
        @for $i from 1 through 12 {
            .loading-line:nth-child(#{$i}){
                transform: rotate($i * 30deg);
                &::before{
                    animation: fade 1.2s -0.1s*$i infinite ease-in-out both;
                }
            }
        }  
    }
   
}
@keyframes fade{
    0%,39%,100%{
        opacity: 0;
    }
    40%{
        opacity: 1;
    }
}