两种颜色渐变文字效果代码

学习  ·  2020-03-06

本篇文章记录一下,我怕以后找不到了:

HTML部分代码

<div id="moml">
    <div style="text-align:center;">
        颜色渐变文字效果
    </div>
</div>

JavaScript实现颜色渐变文字效果代码:

function changeColor() {
    var color = "#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
    color = color.split("|");
    document.getElementById("moml").style.color = color[parseInt(Math.random() * color.length)];
}
setInterval("changeColor()", 200);

CSS实现颜色渐变文字效果代码:

#momk {
    animation: change 10s infinite;
    font-weight: 100;
}

@keyframes change {
    0% {
        color: #5cb85c;
    }

    25% {
        color: #556bd8;
    }

    50% {
        color: #e40707;
    }

    75% {
        color: #66e616;
    }

    100% {
        color: #67bd31;
    }
}
评论
亦桉小站. All Rights Reserved.
赣ICP备19000739号-3