css 渐变

https://blog.csdn.net/hncu1990/article/details/118878493

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: #000;
        }

        @property --angle {
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
        }

        h1 {

            text-align: center;
            font-size: 150px;
            font-weight: 900;
            line-height: 150px;
            word-spacing: 100vw;
            color: transparent;
            -webkit-background-clip: text;
            /* var(--angle), */
            /* background-image: linear-gradient( #02c4ff 30%,#000 30%,#02ff9e 30%, #000 30%,#f8f406 30%); */
            background-image: linear-gradient(var(--angle),
                    #02c4ff 30%,
                    /* 这里的0，是缩写，相当于33.3% */
                    #000 0,
                    #000 35%,
                    /* 这里的0，是缩写，相当于66.6% */
                    #09f8b0 0,
                    #09f8b0 65%,
                    #000 0,
                    #000 70%,
                    #f6fa03 70%
                    /* #ff8235 70%, */
                );
            background-clip: text;
            animation: rotate 5s infinite
        }

        @keyframes rotate {
            to {
                --angle: 360deg
            }
        }
    </style>
</head>

<body>
    <h1>沸点圈子 技术交流圈 内推招聘广场 AI聊天室 111</h1>
</body>

</html>
posted @ 2023-02-28 11:50  7c89  阅读(20)  评论(0)    收藏  举报