CSS3实现渐变色字体

电玩女神 2022-06-04 01:53 306阅读 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 条评论，306人围观）

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

相关阅读

相关 css3文字扫光渐变色

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

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

相关 css渐变色(css渐变色代码 rgba)

如何制作渐变色的饮？如何制作渐变色的饮料你好这个需要不同密度的酒才可以制作的啊。 ![css渐变色][css] 黑色不能印渐变色吗？黑色也是可以印渐变色的

╰+哭是因爲堅強的太久メ/ 2023年09月26日 13:10/ 0 赞/ 61 阅读

相关 css3 背景渐变色实现过渡效果

前言：对于设了渐变颜色的background，css会当做背景图片处理，这时直接设过渡transition会没有效果；整理了两种用过的，给渐变背景加过渡的方法：方法

浅浅的花香味﹌/ 2023年03月01日 09:40/ 0 赞/ 37 阅读

相关背景渐变色

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

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

相关 unity3d：文字渐变色

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

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

相关 CSS3实现渐变色字体

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

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

相关文字渐变色

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

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

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

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

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

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

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

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

相关 CSS3 - 线性渐变色

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

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