CSS小动画 流动文字效果

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="load">
        <div>m</div>
        <div>o</div>
        <div>c</div>
        <div>.</div>
        <div>i</div>
        <div>k</div>
        <div>i</div>
        <div>m</div>
        <div>3</div>
        <div>1</div>
    </div>
</body>
</html>

CSS

html,body{
    height: 100%;
}

body{
    background: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family:Arial, Helvetica, sans-serif
}

.load{
    position: relative;
    width: 800px;
    height: 36px;
    user-select: none;
    padding: 100px;

}

.load div{
    position: absolute;
    width: 20px;
    height: 36px;
    font-size: 1.5em;
    padding: 5px;
    opacity: 0;
    background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
    -webkit-background-clip:text;
    color: transparent;
    transform: rotate(180deg);
    text-transform: uppercase;
    animation: move 2s linear infinite;
}


.load div:nth-child(2){
    animation-delay: .2s;
}

.load div:nth-child(3){
    animation-delay: .4s;
}

.load div:nth-child(4){
    animation-delay: .6s;
}

.load div:nth-child(5){
    animation-delay: .8s;
}

.load div:nth-child(6){
    animation-delay: 1s;
}
.load div:nth-child(7){
    animation-delay: 1.2s;
}
.load div:nth-child(8){
    animation-delay: 1.4s;
}
.load div:nth-child(9){
    animation-delay: 1.6s;
}
.load div:nth-child(10){
    animation-delay: 1.8s;
}

@keyframes move{
    0%{
        left: 0;
        opacity: 0;
    }
    35%{
        left: 40%;
        transform: rotate(0deg);
        opacity: 1;
    }
    65%{
        left: 60%;
        transform: rotate(0deg);
        opacity: 1;
    }
    100%{
        left: 100%;
        transform: rotate(-180deg);
        opacity: 1;
    }

}

 

点赞