预览特效

特效代码(CSS)

     .text {
        position: relative;
        display: inline-block;
        color: transparent;
        background: linear-gradient(150deg,
            #08dfb4,
            #e6d205 20%,
            #2cc4e0 40%,
            #8b2ce0 60%,
            #ff6384 80%,
            #08dfb4);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 400% 100%;
        animation: flowCss 12s infinite linear;
    }

    @keyframes flowCss {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: -400% 0;
        }
    }

    .text:hover {
        animation: flowCss 5s infinite linear;
    }

调用教程

调用本地(推荐)

1. 将css代码保存在你的整体css文件里，也可以直接放在前端(这里演示的是直接放在前端)
2. 然后将以下代码放在你需要的地方

<style>
    .text {
        position: relative;
        display: inline-block;
        color: transparent;
        background: linear-gradient(150deg,
            #08dfb4,
            #e6d205 20%,
            #2cc4e0 40%,
            #8b2ce0 60%,
            #ff6384 80%,
            #08dfb4);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 400% 100%;
        animation: flowCss 12s infinite linear;
    }

    @keyframes flowCss {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: -400% 0;
        }
    }

    .text:hover {
        animation: flowCss 5s infinite linear;
    }
</style>
<h2 class="text">Web因你而不同，让我们为你的Web锦上添花！</h2>

调用云端(不推荐)

代码较短，暂时不提供

可修改内容

1. 渐变颜色：修改7至12行的颜色代码
2. 渐变内容：在部署代码中可以将 Web因你而不同，让我们为你的Web锦上添花！ 改为自己喜欢的内容。
3. 渐变循环时间：将在css代码17行中的12 改为你想要的时间
4. 鼠标选择循环时间：将在css代码31行中的5 改为你想要的时间