html字体变色特效,css字体特效，渐变颜色+动画效果

谁践踏了优雅 2022-10-06 11:56 471阅读 0赞

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;

}

1234567

c782e816aed37215016ffdc0e488ad2c.png

就是这样，再配合动画可以做出更好的效果

.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;

}

}

123456

background-blend-mode是背景层颜色的混合模式，hard-height是高亮，这样子字体颜色就会从左到右变换

发表评论

表情：
评论列表 （有 0 条评论，471人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS 字体效果

    [CSS 字体效果][CSS] [text-shadow][]还没有出现时，大家在网页设计中阴影一般都是用photoshop做成图片，现在有了css3可以直接使用[tex

    我就是我我就是我/ 0 赞/ 444 阅读