CSS3实现渐变色字体

电玩女神 2022-06-04 01:53 247阅读 0赞

前两天在学习移动端项目，于是就拿京东的移动端页面来模仿和学习了，  
在模仿的过程中，我发现了京东移动端页面的字体有渐变色，很是好奇，很感兴趣，于是就是查看了代码，并且百度了一下，发现实现渐变色字体的两种方法，（目前我自己就发现两种），  
第一种比较简单，直接上代码：

**方法一：**  
html结构

<p class="font1">你好，这是我的渐变色字体</p>

样式：

.font1{ font-size:22px; background-image: -webkit-linear-gradient(bottom, rgb(201, 115, 255), rgb(20, 11, 255)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

效果：  
![字体效果][SouthEast]

**方法二：**  
html结构：

<h2 class="font2" data-text="渐变色字体一">渐变色字体一</h2>

css样式：

.font2 { display: inline-block; font-family: '微软雅黑'; font-size: 10em; position: relative; }
    
            .font2::after { content: attr(data-text); color: green; position: absolute; left: 0; z-index: 2; -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0))); }

**效果：**  
![字体效果][SouthEast 1]

由于这些效果的实现都是依赖webkit内核实现的，所以，这种效果在webkit内核的浏览器中会正常显示，而其他非webkit内核的浏览器就没法正常显示了，有些会显示纯色，有些会直接显示黑色字体。

[SouthEast]: /images/20220604/74efdd75e33f4e29b3b3d40bd1cc95c1.png
[SouthEast 1]: /images/20220604/4aaebca450484180bae79db6328e7fb4.png

发表评论取消回复

表情：

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

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

相关阅读

相关 css3文字扫光渐变色

[css3实现文字扫光渐变动画效果][css3] 利用css3这个属性（背景剪裁）： background-clip: border-box || paddin

秒速五厘米/ 2024年02月18日 21:16/ 0 赞/ 38 阅读

相关背景渐变色

background: linear-gradient( 90deg, \0a5f97 0%, rgba(141, 228, 255, 0.08)

蔚落/ 2022年12月27日 01:53/ 0 赞/ 141 阅读

相关 unity3d：文字渐变色

using UnityEngine; using System.Collections.Generic; using UnityEngine.UI;

灰太狼/ 2022年12月17日 08:55/ 0 赞/ 173 阅读

相关 echarts 图表渐变色

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAaHp4T25saW5lT2s_size_20

Bertha 。/ 2022年09月11日 09:25/ 0 赞/ 245 阅读

相关 CSS3实现渐变色字体

前两天在学习移动端项目，于是就拿京东的移动端页面来模仿和学习了，在模仿的过程中，我发现了京东移动端页面的字体有渐变色，很是好奇，很感兴趣，于是就是查看了代码，并且百度了一

电玩女神/ 2022年06月04日 01:53/ 0 赞/ 248 阅读

相关文字渐变色

方法一 background-clip + text-fill-color 李祺丰·前端 <h2 class="text-gradient" data-text

古城微笑少年丶/ 2022年05月22日 04:07/ 0 赞/ 253 阅读

相关纯CSS3渐变色板配色代码

[http://down.admin5.com/texiao/][http_down.admin5.com_texiao] style.css .gradient

向右看齐/ 2022年01月29日 06:29/ 0 赞/ 244 阅读

相关 css中的渐变色和突变

代码: ![35.jpg][] 效果: ![36.jpg][] <!DOCTYPE html> <html> <head> <me

分手后的思念是犯贱/ 2022年01月11日 09:19/ 0 赞/ 272 阅读

相关 CSS——设置边框渐变色

前言最近在写一个typecho的主题，刚好遇到这样一个问题就记录下吧步骤这是一个CSS的过度效果，效果如下。 ![1334215-201908021424

小灰灰/ 2021年11月01日 09:28/ 0 赞/ 494 阅读

相关 CSS3 - 线性渐变色

解决方法一、 linear-gradient() background-color: red; / 浏览器不支持的时候显示 / backgro

太过爱你忘了你带给我的痛/ 2021年07月26日 11:21/ 0 赞/ 470 阅读