CSS3下的渐变文字效果实现示例


Posted in HTML / CSS onMarch 02, 2018

一、方法一:借助mask-image属性

如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面中看到类似下面的效果:

CSS3下的渐变文字效果实现示例

方法一下的文字渐变效果

相应的HTML代码如下:

<h2 class="text-gradient" data-text="天赐美妞">天赐美妞</h2>

与HTML相对应的CSS代码如下:

.text-gradient {  
    display: inline-block;
    font-family: '微软雅黑';
    font-size: 10em;
    position: relative; 
}  
  
.text-gradient[data-text]::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)));
}

从CSS代码可以看出,效果的实现除了“content内容生成技术”以外,主要是使用了mask-image属性,内容则是“webkit核心浏览器下的渐变”了。

二、方法二:background-clip + text-fill-color下的实现

如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面中看到类似下面的效果:

CSS3下的渐变文字效果实现示例

方法二下的文字渐变效果

此处实现相对上面要简单些,HTML代码如下:

<h2 class="text-gradient">天赐美妞</h2>

与HTML相对应的CSS代码如下:

.text-gradient {  
    display: inline-block;
    color: green;
    font-size: 10em;
    font-family: '微软雅黑';
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
};

CSS代码中关键有用的其实就是最后三行:

background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

此方法虽然使用的CSS属性相对多些,但是结构简单,易于控制,颜色的选取与控制也更精确,理解上也更容易理解。我个人是推荐使用方法二的。

三、结语

由于目前text-fill-color与mask-image属性貌似就webkit核心的浏览器支持,所以两个demo页面只能在Chrome浏览器或是Safari浏览器下才能看到渐变效果。Firefox浏览器下纯色,IE下就更不用说了。

但是,文字渐变本身就是装饰性的功能,所以,本着渐进增强的原则,我们在实际项目中其实是可以大胆使用的。在不影响原来功能基础上,几行CSS代码,让占有率愈来愈高的Chrome浏览器下有更好的视觉体验效果,何乐而不为呢?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用css3绘制出各种几何图形
Aug 17 HTML / CSS
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 #HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 #HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 #HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 #HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 #HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 #HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 #HTML / CSS
You might like
如何在PHP中进行身份认证
2006/10/09 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
js自带函数备忘 数组
2006/12/29 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
django批量导入xml数据
2016/10/16 Python
python调用百度语音识别api
2018/08/30 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
python实现大文件分割与合并
2019/07/22 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
农民工创业典型事迹
2014/01/25 职场文书
中专自我鉴定
2014/02/05 职场文书
校园安全教育广播稿
2014/02/17 职场文书
在校实习生求职信
2014/06/18 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python