CSS3实现渐变色字体

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

方法一：
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;}

效果：

方法二：
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)));}

效果：

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

CSS3实现渐变色字体相关推荐

php发光字体代码,CSS3怎么实现字体发光效果
这次给大家带来CSS3怎么实现字体发光效果,CSS3实现字体发光效果的注意事项有哪些,下面就是实战案例,一起来看一下. 博客页面左上角的"猿来是勇者"文字已制作发光效果,分享方法如 ...
CSS SANS – 神奇！使用 CSS3 创建的字体
在我们的认识中,CSS 所能做的就是改变网页的排版布局,调整字间距等.然而,这里我们要介绍的则是使用 CSS3 制作字体.CSS SANS 可以通过 CSS 技术创建的A-Z字体,一起来围观下. 在线 ...
CSS3 文字与字体相关样式
CSS3 给文字添加阴影,使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中删除了,在 CSS3 的 text 模块中 ...
css实现渐变色字体
css实现渐变色字体渐变色字体的思路:将背景色改为渐变色,然后再去除字体外的多余部分,最后将字体设置为透明 ! 代码如下 // 渐变色字体background-image: linear-gradi ...
css linux 等宽字体,CSS3 等宽字体与ch单位的详解
下面我们来看一篇关于CSS3 等宽字体与ch单位的使用方法介绍,希望这篇文章能够让各位理解到css中ch单位及字体等宽问题哦. 一.什么是等宽字体? 所谓等宽字体,一般是针对英文字体而言的.东亚字体, ...
字体模糊是怎么回事css,CSS3 translate导致字体模糊怎么办 CSS3 translate导致字体模糊解决方法...
本篇文章小编给大家分享一下CSS3 translate导致字体模糊解决方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 使用了translate会导致字体模糊. .med ...
CSS3发光文字字体切换特效
index.html代码 <!DOCTYPE html> <html lang="en" > <head> <meta charset=& ...
css3 渐变色 3种,css3实现渐变色文字的三种方法
css3样式代码实现渐变色文字的三种方法,有一定的参考价值,有需要的朋友可以参考或记录一下,希望对你有所帮助. 在开发过程中,UI设计师经常会设计一些带渐变文字的设计图,给到我们前端程序员,放在以前程 ...
div渐变色字体渐变色
1.利用CSS3设置div渐变色 .backDiv{background: linear-gradient(to right bottom, #ccc , #fff); /*这个函数w3c就有,不多讲 ...

CSS3实现渐变色字体

CSS3实现渐变色字体相关推荐

最新文章

热门文章