CSS实现炫彩渐变滚动文字颜色

最新推荐文章于 2024-08-03 15:32:26 发布

PangDong__

最新推荐文章于 2024-08-03 15:32:26 发布

阅读量477

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_34965759/article/details/122541128

版权

效果：

文字颜色是会横向变化的，话不多说直接上代码

HTML：

<p class="hotFile">abc</p>

CSS：

.hotFile{
    text-transform:uppercase;
    background: -webkit-linear-gradient(45deg,#e95616,#56e916,#e716e9,#1616e9);
    -moz-linear-gradient(45deg,#e95616,#56e916,#e716e9,#1616e9);
    -ms-linear-gradient(45deg,#e95616,#56e916,#e716e9,#1616e9);/* 渐变背景 */
    color:transparent;
    /*设置字体颜色透明*/
    -webkit-background-clip: text;
    /*背景裁剪为文本形式*/
    animation: ran 5s linear infinite;
    /*动态20s展示*/
}

@keyframes ran {
    from {
        backgroud-position: 0 0;
    }
    to {
        background-position: 1000px 0;
    }
}