动态变色文本 转自马黑教程专版

admin

动态变色文本

admin

<style>
.txtBg {
        font-size: 4rem;
        color: transparent;
        width: 500px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-image: linear-gradient(90deg, green, olive, transparent, tomato, green);
        background-size: 500px 100px;
        background-position: 500px 0;
        border: 1px solid;
        background-clip: text;
        -webkit-background-clip: text;
        animation: chgc 2s linear infinite;
}
@keyframes chgc {
        from { background-position: -500px 0; }
        to { background-position: 0 0; }
}
</style>

<div class="txtBg">动态变色文本</div>