字体颜色渐变（当遇到需要js改变HTML内容时）

Posted 2020-11-04 AndreaLi

我之前遇到过一个情况，字体颜色渐变的效果其中一种代码会影响到js重新赋值该div的的值重读或者混乱的情况：

style样式：

.normal{
　　background: -webkit-linear-gradient(top, #b5339d, #e8096f);
　　-webkit-background-clip: text;
　　-webkit-text-fill-color: transparent;
}
.button,.button2{
　　display: inline-block;border: 1px solid #999;color: #999;font-size: 12px;
　　padding: 2px;
}

body内容：

<div class="normal">正常文档内容</div>
<div class="button">点击改变内容</div>

js代码：

$(".button").unbind("click").click(function(){
　　$(".normal").html("改变之后的内容")
})

这种情况可能会出现赋值混乱的情况。

 

 

另外还可以用另外一种css样式实现字体颜色渐变：

style样式：

.normal2{
　　position: relative;
　　height: 21px;
}
.normal2:after{
　　content: attr(text);
　　position: absolute;
　　top: 0;
　　left: 0;
　　z-index: 2;
　　color: #e8096f;
　　-webkit-mask: -webkit-gradient(
　　　　linear,
　　　　left top,
　　　　right top,
　　　　from(rgba(232,9,111,1)),
　　　　to(rgba(232,9,111,0.7)));
　　);
}

body内容：

<div class="normal2" text="正常文档内容2"></div>
<div class="button2">点击改变内容2</div>

js代码：

$(".button2").unbind("click").click(function(){
　　$(".normal2").html("改变之后的内容")
})

 

如果有伙伴们遇到赋值混乱的情况，建议选择第二种样式实现字体颜色渐变