CSS动画[png]

宋乐
宋乐 5月4日
/*
   全局loading组件
   Author: 宋乐
 */
<template>
    <div class="g-loading">
        <div class="contain">
            <div class="loading">
                <ul>
                    <li><img src="../../../static/images/gLoadImg/0.png" alt=""></li>
                    <li><img src="../../../static/images/gLoadImg/1.png" alt=""></li>
                    <li><img src="../../../static/images/gLoadImg/2.png" alt=""></li>
                    <li><img src="../../../static/images/gLoadImg/3.png" alt=""></li>
                    <li><img src="../../../static/images/gLoadImg/4.png" alt=""></li>
                    <li><img src="../../../static/images/gLoadImg/5.png" alt=""></li>
                    <li><img src="../../../static/images/gLoadImg/6.png" alt=""></li>
                    <li><img src="../../../static/images/gLoadImg/7.png" alt=""></li>
                    <li><img src="../../../static/images/gLoadImg/8.png" alt=""></li>
                    <li><img src="../../../static/images/gLoadImg/9.png" alt=""></li>
                    <li><img src="../../../static/images/gLoadImg/10.png" alt=""></li>
                    <li><img src="../../../static/images/gLoadImg/11.png" alt=""></li>
                </ul>
            </div>
            <div class="load-text">加载中...</div>
        </div>

    </div>
</template>
<script>
export default {}
</script>
<style lang='scss' scoped>
$length: 11rem;
$bottom: 24%;
@keyframes Myflash {
    from {
        left: 0;
    }
    to {
        left: -11*$length;
    }
}
.g-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    .contain {
        position: relative;
        height: 100%;
        width: 100%;
        .loading {
            left: calc((100% - #{$length})/2);
            position: absolute;
            bottom: $bottom;
            width: $length;
            height: $length;
            overflow: hidden;
            ul {
                animation: Myflash 1s steps(11) 0s infinite;
                position: relative;
                width: 11*$length;
                height: $length;
                li {
                    height: $length;
                    width: $length;
                    float: left;
                }
                img {
                    width: $length;
                    height: 100%;
                }
            }
        }
        .load-text {
            font-size: $length * 0.06;
            color: #615f5f;
            text-align: center;
            width: 100%;
            position: absolute;
            bottom: $bottom * 1.14;
            padding-left: $length * 0.03;
            z-index: 2;
        }
    }
}
</style>