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

谁践踏了优雅 2022-10-06 11:56 314阅读 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是高亮，这样子字体颜色就会从左到右变换

[c782e816aed37215016ffdc0e488ad2c.png]: /images/20221005/0caa6d4b37ca4bae862423ccdd952564.png

发表评论取消回复

表情：

评论列表（有 0 条评论，314人围观）

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

相关阅读

相关 CSS3 transition 渐变特效

transition的使用需要和 hover 搭配使用 transition：属性持续的时间(s) ease-in/ease(曲线规律) 多少秒后开始(s) tran

一时失言乱红尘/ 2022年12月22日 04:53/ 0 赞/ 102 阅读

相关 CSS新增属性----渐变、文本效果和字体

CSS3渐变（Gradients）通过CSS3渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡 `渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的

秒速五厘米/ 2022年12月04日 07:32/ 0 赞/ 224 阅读

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

css属性中有一个background-clip，用于设置绘图的背景，它的值可以是content-box,padding-box,border-box,text,其中text就

谁践踏了优雅/ 2022年10月06日 11:56/ 0 赞/ 315 阅读

相关 html字体的渐变效果,神奇！js+CSS+DIV实现文字颜色渐变效果

本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果，供大家参考，具体内容如下下面是 CSS 部分代码： body\{ font:12px/1.5 Micro

约定不等于承诺〃/ 2022年10月06日 00:57/ 0 赞/ 311 阅读

相关字体特效

旋转字体 void CViewFontView::OnDraw(CDC\ pDC) \{ 　CViewFontDoc\ pDoc = GetDocument(

我就是我/ 2022年08月10日 11:50/ 0 赞/ 102 阅读

相关 CSS 字体效果

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

我就是我/ 2022年06月10日 06:37/ 0 赞/ 267 阅读

相关 html / CSS 自定义字体font 自己设置好看的特效字体

这篇文章的主题是CSS3属性： @font-face 楼主很喜欢CSS3的一些新增属性，给我们前端程序员带来了非常很多福利，我们的页面也可以做的更加的美观。直接放效

r囧r小猫/ 2022年06月03日 09:43/ 0 赞/ 989 阅读

相关一种文字颜色渐变效果的超级连接特效

<html> <head> <title>一种文字颜色渐变效果的超级连接特效</title> <script type="text/javascript">

雨点打透心脏的1/2处/ 2022年03月28日 14:12/ 0 赞/ 200 阅读

相关 HTML5特效动画

7、 [HTML5 Canvas 鼠标滑过3D动画背景][HTML5 Canvas _3D] 在网页中我们经常会设置元素的背景，简单点的设置背景颜色，复杂的就设置背

淡淡的烟草味﹌/ 2022年01月29日 08:57/ 0 赞/ 407 阅读

相关【前端】CSS 字体颜色渐变

HTML源码 <span class="valueStyle">15</span> CSS代码 .valueStyle{ ...

红太狼/ 2021年01月07日 12:40/ 0 赞/ 737 阅读