前端初体验——css动画练习1：发光字牌动画

本文链接：https://blog.csdn.net/2301_78566776/article/details/141676375

本代码效果如下视频

QQ2024829-133550

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    body{
            display: flex;
            align-items: center;
            height: 100vh;
            justify-content: center;
            background:linear-gradient(0deg,#110557,#000000 );
        }
    span{
        font-size: 20vh;
        color: #fd8398;
        font-weight: 600;
        margin: 20px;
        animation: aaa 2.4s linear infinite alternate;
        text-shadow: 30px 0px 50px #00bed8;
    }
    span:nth-child(2){
        animation-delay:0.3s ;

    }
    span:nth-child(3){
        animation-delay:0.6s ;

    }
    span:nth-child(4){
        animation-delay:0.9s ;

    }
    span:nth-child(5){
        animation-delay:1.2s ;

    }
    span:nth-child(6){
        animation-delay:1.5s ;

    }
    span:nth-child(7){
        animation-delay:1.8s ;

    }
    span:nth-child(8){
        animation-delay:2.1s ;

    }

    @keyframes aaa{
        50%{
            color: #00bed8;
            text-shadow: 30px 0px 50px #fd8398;
          
        }
        100%{
            color: #b733e3;
            text-shadow: 30px 0px 50px rgb(237, 217, 89) ;
            font-size: 25vh;
        }
        
    }


    </style>

</head>
<body>
    <div class="container">
        <span>T</span>
        <span>h</span>
        <span>e</span>
        <span>E</span>
        <span>i</span>
        <span>g</span>
        <span>h</span>
        <span>t</span>

    </div>
</body>
</html>