每日css

朱雀 2023-06-18 06:00 30阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <ul>
            <li data-text="Hello CSS3">
                Hello CSS3
            </li>
        </ul>
    </body>
    </html>

*{ 
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{ 
        width: 100%;
        min-height: 100vh;
        background-color: #111;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    ul li{ 
        position: relative;
        display: block;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 800;
        color: rgba(255,255,255,0.1);
    }
    ul li:before{ 
        content:attr(data-text);
        position: absolute;
        left:0;
        top:0;
        background: url("./wave.png") repeat-x;
        -webkit-background-clip: text;
        animation: animate 2s linear infinite;
        transition: 0.5s;
        width:0;
        overflow: hidden;
        white-space: nowrap;
    }
    ul li:hover:before{ 
        width:100%;
    }
    @keyframes animate { 
        0%{ 
            background-position: 0px;
        }
        100%{ 
            background-position: 200px;
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191130182651999.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0,size_16,color_FFFFFF,t_70