CSS实现文字扫描颜色渐变

新发现的一个demo 利用CSS实现文字扫描颜色渐变

css, 文本效果

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1684
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.masked {
    text-align: center;
    background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s infinite linear;
}
@-webkit-keyframes masked-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}
.slideShine {
    background: #871317 -webkit-linear-gradient(left, #561214, #febaf7 50%, #ff0 90%, #561214) no-repeat 0 0;
    background-size: 20% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 36px;
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
}
.slideShine {
    -webkit-animation: slideShine 4s linear infinite;
    animation: slideShine 4s linear infinite;
}
@-webkit-keyframes slideShine {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 100%;
    }
}
@keyframes slideShine {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 100%;
    }
}

HTML

新发现的一个demo 利用CSS实现文字扫描颜色渐变

css, 文本效果

编辑器支持Emmet

快捷键

新发现的一个demo 利用CSS实现文字扫描颜色渐变

css, 文本效果

CSS3 块状渐变色立方体的文字效果

使用CSS实现带渐变色彩动画的边线

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：