<div class="loader">

    <span>l</span>

    <span>o</span>

    <span>a</span>

    <span>d</span>

    <span>i</span>

    <span>n</span>

    <span>g</span>

</div>

html, body, div{

    margin:;

    padding:;

    /* 设置的宽高包括内外边距、边框、内容 */

    box-sizing: border-box;

}

/* body子元素水平垂直居中  */

body{

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: black;

    overflow: hidden;

}

/* 设置.loader容器样式 */

.loader{

    position: relative;

    width: 40em;

    height: 3em;

    /* border: 1px solid white; */

    color: dodgerblue;

    font-size: 1.5em;

    font-family: sans-serif;

    text-transform: uppercase;

    animation: change-color 10s linear infinite;

}

@keyframes change-color {

    0% {

        color: dodgerblue;

    }

    20% {

        color: hotpink;

    }

    40% {

        color: gold;

    }

    60% {

        color: mediumpurple;

    }

    80% {

        color: lightgreen;

    }

    100% {

        color: dodgerblue;

    }

}

/* 给文字增加渐隐渐显动画 */

.loader span{

    position: absolute;

    height: 3em;

    /* 有边框可以看出两侧如何旋转的

    border: 1px solid white; */

    animation: moving 2s linear infinite;

    /* 设置动画延时,增强动画效果 */

    animation-delay: calc((var(--n) - 10) * 0.25s);

    /* 上面0.25没有带单位s导致元素叠加,编码不认真 */

}

.loader span:nth-child(1) {

    --n:;

}

.loader span:nth-child(2) {

    --n:;

}

.loader span:nth-child(3) {

    --n:;

}

.loader span:nth-child(4) {

    --n:;

}

.loader span:nth-child(5) {

    --n:;

}

.loader span:nth-child(6) {

    --n:;

}

.loader span:nth-child(7) {

    --n:;

}

@keyframes moving{

    0%{

        filter: opacity(0);

        /* 旋转 ,因为设置其多余高，所以旋转180度就出现两侧的不同水平线的动画*/

        transform: rotate(-180deg);

        /* 移动 */

        left: 100%;

    }

    33% {

        filter: opacity(1);

        transform: rotate(0deg);

        left: 60%;

    }

    66% {

        filter: opacity(1);

        transform: rotate(0deg);

        left: 40%;

    }

    100% {

        filter: opacity(0);

        transform: rotate(-180deg);

        left:;

    }

}