0
点赞
收藏
分享

微信扫一扫

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

罗蓁蓁 2022-01-17 阅读 120
csscss3html

效果:

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

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;
    }
}
举报

相关推荐

0 条评论