css3 渐变色 3种,css3实现渐变色文字的三种方法
css3样式代码实现渐变色文字的三种方法,有一定的参考价值,有需要的朋友可以参考或记录一下,希望对你有所帮助。
在开发过程中,UI设计师经常会设计一些带渐变文字的设计图,给到我们前端程序员,放在以前程序员只能是默默地叹息,在CSS3诞生后,解决了前端开发过程中的好多个难题,比如动画,遮罩等等。
我们今天要实现的就是使用纯CSS实现渐变色文字,下面是预览图:
第1种方法:使用 background-cli、 text-fill-color.gradient-text-one{
background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
第2种方法:使用 mask-image.gradient-text-two{
color:red;
}
.gradient-text-two[data-content]::after{
content:attr(data-content);
display: block;
position:absolute;
color:yellow;
left:0;
top:0;
z-index:2;
-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
}
第3种方法:使用 linearGradient、fill.gradient-text-three{
fill:url(#SVGID_1_);
font-size:40px;
font-weight:bolder;
}
花信年华
以上3种方法全部代码完整DEMO:html>
CSS3渐变字体
*{margin:0;padding:0;}
body,html{width:100%;height:100%;}
.wrapper{width:80%;margin:0 auto;margin-top:30px;}
.gradient-text{
text-align: left;
text-indent:30px;
line-height: 50px;
font-size:40px;
font-weight:bolder;
position: relative;
}
.gradient-text-one{
background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.gradient-text-two{
color:red;
}
.gradient-text-two[data-content]::after{
content:attr(data-content);
display: block;
position:absolute;
color:yellow;
left:0;
top:0;
z-index:2;
-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
}
.gradient-text-three{
fill:url(#SVGID_1_);
font-size:40px;
font-weight:bolder;
}
方法1. background-clip + text-fill-color
花样年华
方法2. mask-image
豆蔻年华
方法3. svg linearGradient
花信年华
css3 渐变色 3种,css3实现渐变色文字的三种方法相关推荐
- CSS3实现渐变文字的三种方案
在开发过程中,UI设计师经常会设计一些带渐变文字的设计图,给到我们程序员,而我们程序员们呢,大多都是默默地叹息传来,不过CSS3的诞生,解决了前端开发过程中的好多个难题,比如动画,遮罩等等 1. 我们 ...
- html如何给3种渐变色,css中颜色渐变的实现(三种方式)
本篇文章给大家带来的内容是关于css中颜色渐变的实现(三种方式),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. !!注意IE9及之前的版本不支持渐变.Safari要加-webkit- ...
- linux运维工程分多少种,运维工程师划分的三种层次都是什么
今天小编要跟大家分享的文章是关于运维工程师划分的三种层次都是什么?正在从事Linux运维功能的小伙伴们来和小编一起看一看吧,希望本篇文章能够对大家有所帮助. 初级:背锅侠型运维 背锅侠型运维人员在遇到 ...
- 3种mysql的储存机制_MySQL三种InnoDB、MyISAM和MEMORY存储引擎对比
三种引擎的区别: 事务:InnoDB支持事务,MyISAM和MEMORY两个不支持. 存储限制:InnoDB有64TB的存储限制,MyISAM和MEMORY要跟具体情况而定. 空间使用:InnoDB对 ...
- LVS:三种负载均衡方式比较+另三种负载均衡方式
欢迎支持笔者新作:<深入理解Kafka:核心设计与实践原理>和<RabbitMQ实战指南>,同时欢迎关注笔者的微信公众号:朱小厮的博客. 欢迎跳转到本文的原文链接:https: ...
- oracle分页的三种方式,oracle 使用rownum的三种分页方式
rownum是Oracle数据库中的一个特有关键字,返回的是一个数字代表记录的行号. 基础知识:rownum只能做 获取51到100的数据 三种分页的写法: 1.使用minus,原理就是查询出前100 ...
- PHP中数据类型转换有多少种,PHP中数据类型转换的三种方式
PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: 1.(int).(integer):转换成整形 2.(float).(double).(real):转换成浮点型 3.(string): ...
- java中两种异常类型_Java中的三种异常类型
java中两种异常类型 Errors are the bane of users and programmers alike. Developers obviously don't want thei ...
- c语言函数三种方式,c语言函数的三种调用方式是什么
函数的三种调用方式:1.函数作为表达式中的一项出现在表达式中,例"z=max(x,y)":2.函数作为一个单独的语句,例"printf("%d",a) ...
最新文章
- 2016年SDN通往成功路的5大步
- [数据库]Oracle和mysql中的分页总结
- Oracle Database 快捷版 安装 连接
- C++ 编译,运行过程 详解。
- 10 个冷门但又非常实用的 Docker 使用技巧
- 使用sklearn进行数据预处理 —— 归一化/标准化/正则化
- python中的类装饰器应用场景_Python 自定义装饰器使用写法及示例代码
- Linux CentOS 7 安装 MySQL(5.7.26)
- 对偶上升实例-MATLAB代码
- AOP和OOP的区别
- VC2013 ArcGIS Engine 10.0开发环境搭建
- proteus仿真 引脚显示电平变化但不能显示波形
- 数据结构链表(C语言实现)
- 高级程序员的自我修养:如何才能成长为牛逼的高级程序员?
- 将hustoj 数据从Ubuntu 14.04 成功迁移到 ubuntu 16.04
- mysql5.7数据库mysqldump和XBK备份和恢复
- Fragment already added解决
- 基于jsp,javaweb、ssm教务管理系统
- 新浪 透视java_(JAVA)MyColorCube7(透视效果)
- ​【​观察】云栖大会共话JDM模式 揭秘创新背后的价值和启示
热门文章
- 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(一)
- 非洲瓜哇JAVA布的特点_java语言的基本特性以及编程细节
- Qt线程之QRunnable的使用详解
- STM32的ADC笔记
- 深入java抽象类和接口
- STM32 之十四 System Memory、Bootloader
- arm交叉编译器gnueabi、none-eabi、arm-eabi等的区别
- 用C语言编写贪吃蛇项目描述,刚学C语言,想写一个贪吃蛇的代码
- flstudio插件找不到_Eclipse4.17安装spring插件的问题
- NXP I.MX6ULL 交叉编译工具链下载地址?