css属性background-clip实现渐变颜色+动画效果

css属性中有一个background-clip，用于设置绘图的背景，它的值可以是content-box,padding-box,border-box,text,其中text就是把颜色绘制到文字上，还有一个属性是text-fill-color，它也是设置对象中文字的填充颜色，和color作用一样，它的优先级比color大，还有就是他的兼容性不太好，只适用于谷歌。

//字体颜色渐变
.text{-webkit-background-clip: text;
    background-clip: text;
    background-image:linear-gradient(rgb(255,255,0),rgb(0,255,255));
    font-size: 20px;
    width:120px;
    -webkit-text-fill-color: transparent; 
}
<p class="text">1234567</p>

//颜色渐变+动画效果
text{-webkit-background-clip: text;
    width: 200%;
    background-clip: text;
    background-image:linear-gradient(-45deg,rgb(255,255,0),rgb(0,255,255));
    font-size: 20px;
    width:120px;
    animation: shine 2s infinite;
     background-blend-mode: hard-light; 
     background-size: 200%; 
     color: white;
     -webkit-text-fill-color: transparent; 
}
@keyframes shine {
    from {
        background-position: 100%;
    }
    to {
        background-position: 0;
    }
}
<p class="text">1234567</p>

进入前端入门建站教程官网入口

一款免费开源流程图和白板应用工具——draw.io

mysql结果如何保留小数点后三位（不足补0）

介绍js去掉小数点后面数字的几种介绍

el-table鼠标点击列表自动改变颜色(当前列高亮效果)

contenteditable修改选中样式边框颜色

标签： round, 动画, 绘图, 颜色

上面是“css属性background-clip实现渐变颜色+动画效果”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2088.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！