首页>>老刘专栏
在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯css实现渐变文字了。下面就介绍3中实现方式供大家参考!
基础样式:
.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }
第一种方法,使用 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; }
说明 :
background: -webkit-linear-gradient(...) 为文本元素提供渐变背景。
webkit-text-fill-color: transparent 使用透明颜色填充文本。
webkit-background-clip: text 用文本剪辑背景,用渐变背景作为颜色填充文本。
第二种方法,使用 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))); }
说明:
mask-image 和 background-image 一样,不仅可以取值是 图片路径,也可以是渐变色。
第三种方法,使用 linearGradient、fill:
.gradient-text-three{ fill:url(#SVGID_1_); font-size:40px; font-weight:bolder; } <svg viewBoxs="0 0 500 300" class="svgBox"> <defs> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50"> <stop offset="0" style="stop-color:yellow"/> <stop offset="0.5" style="stop-color:#fd8403"/> <stop offset="1" style="stop-color:red"/> </linearGradient> </defs> <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text> </svg>
说明:
在SVG中,有两种主要的渐变类型:
线性渐变(linearGradient)
放射性渐变(radialGradient)
SVG中的渐变不仅可以用于填充图形元素,还可以填充文本元素
dom示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>css3渐变字体</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style type="text/css"> *{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; } </style> </head> <body> <section class="wrapper"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">方法1. background-clip + text-fill-color</h3> </div> <div class="panel-body"> <h3 class="gradient-text gradient-text-one">花样年华</h3> </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">方法2. mask-image</h3> </div> <div class="panel-body"> <h3 class="gradient-text gradient-text-two" data-content="豆蔻年华">豆蔻年华</h3> </div> </div> <div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title">方法3. svg linearGradient</h3> </div> <div class="panel-body"> <svg viewBoxs="0 0 500 300" class="svgBox"> <defs> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50"> <stop offset="0" style="stop-color:yellow"/> <stop offset="0.5" style="stop-color:#fd8403"/> <stop offset="1" style="stop-color:red"/> </linearGradient> </defs> <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text> </svg> </div> </div> </section> </body> </html>
效果如下:
- 上一篇: 2022年是SEO行业凋谢的一年
- 下一篇: 快来看看有没有中招:教你如何提升网站页面性能
猜你喜欢
- 2024-02-23 提高小红书运营效率的6个工具
- 2022-11-10 【官方文档】百度搜索网站被黑防范指南
- 2022-11-03 【干货必备】百度搜索优质内容指南
- 2022-08-01 百度隐藏“快照”功能:原因未知-百度快照没了?
- 2022-06-20 浅析“百度搜索基础信息设置规范”!
- 2022-06-15 SEO尴尬,有排名,没流量,没咨询,怎么办?
- 搜索
-
- 2024-04-07 小红书+抖音+直播常见违禁词及替换方法
- 2024-03-14 刷量成风,广告主损失惨重?该被重视了!
- 2024-03-06 代理投的好,还需要招自己的优化师吗?
- 2024-02-23 提高小红书运营效率的6个工具
- 2024-02-23 千川投放百宝书:2万字详解,一篇全掌握!
- 2024-02-20 年后求职15个关键面试问题,助优化师脱颖···
- 2024-01-31 不行就去做销售吧!
- 2024-01-09 合格的优化师,需具备这6项思维能力!
- 2023-12-28 25个金句文案句式,直接套!
- 2023-12-05 做私域必备的10个朋友圈黄金模板
- 2023-12-05 15个爆款短视频文案技巧,看完立马用!
- 2023-11-27 浅析:《百度搜索优质内容解读》,当下百度···
- 2019-11-01 Origin DNS error:使用百···
- 2020-06-20 “401 - 未授权: 由于凭据无效,访···
- 2020-12-01 一级域名好还是二级域名好?
- 2020-10-13 百度抓取诊断工具一直抓取失败怎么办?
- 2019-12-09 域名解析后,网站返回状态码511应对方法
- 2020-04-10 百度下拉框怎么刷?刷百度下拉框软件原理及···
- 2019-08-12 网站出现“403,服务器上文件或目录拒绝···
- 2021-04-13 html/txt文件中文用浏览器打开有乱···
- 2021-01-06 百度移动端的搜索结果上线“踩顶”功能,对···
- 2020-09-03 element.style样式的修改
- 2019-11-06 正确打开.db数据库文件的两种方式,避免···
- 2020-10-20 UC神马搜索怎么做快速排名优化
- 2021-03-28 图片间多余空白怎么解决,6种cssj简单···
- 2022-05-16 IE浏览器宣布6月16日退役 Edge浏···
- 2021-05-20 SEO排名,4月-5月,暴涨暴跌,怎么回···
- 2019-06-27 屏蔽右键和网站源码代码防复制,到底是好事···
- 2019-12-31 网站设计7大seo要点清单,搜索优化事半···
- 2022-02-16 广告投放转化问题7步分析法(建议收藏!)
- 2024-02-20 年后求职15个关键面试问题,助优化师脱颖···
- 2023-11-21 10年老兵看搜索广告的过去、现在和未来
- 2019-02-13 换友链的几个小技巧,快速提升权重!
- 2019-10-22 9102年,发外链还有用吗?
- 2019-12-17 搜索引擎对网站进行排序时会考虑哪些方面?
- 2020-07-11 Robots.txt是怎么写的?
- 热门标签
-
- 401错误
- 401未授权
- 语义效应
- 话术技巧
- 百度
- 谷歌
- pagerank算法
- 算法原理
- tab切换
- 选项卡滑动切换
- 达克效应
- 认知局限
- 交流分享
- webp转GIF
- webp格式转GIF动图
- webp to gif
- 锚定效应
- 百度快排
- 快速排名
- SEO快排
- 万词霸屏
- SEO优化
- 按天计费系统
- 搜索推广模式对比
- SEO快速排名
- SEO优化师
- seo工资
- 合肥seo
- seo公司
- 合肥优化公司
- 选择seo公司
- 互联网黑话
- 2019it黑话
- 网站被k
- 收录消失
- 百度熊掌号
- 网页劫持
- 灰色样式
- 百度公告
- seo外包
- 外包公司
- seo职业发展
- seo计费系统
- FTP
- ftp隐藏文件
- seo改版
- 网站改版周期
- 301重定向
- 首选域名
- 301跳转
- spider爬虫
- 在家办公
- 伪静态
- 纯静态
- seo友好度
- seo前景
- seo发展
- 2019冬至
- 冬至
- 企业主
- 网站改版
- seo部署
- 中文搜索
- 头条搜索
- 中文搜索引擎起源和发展
- seo内容
- 优质内容
- 头条权重
- 私域流量
- seo高手
- seo套路
- seo误区
- 百度算法
- 算法更新
- 网站排名波动
- 网站惩罚
- 百度小程序
- 小程序
- 友情链接
- 被惩罚链接
- seo策略
- seo平衡
- seo和可访问性
- 黑帽SEO
- 刷快排
- seoer
- 提升seo价值
- 屏蔽右键
- 禁止右键
- 禁止查看源代码
- 重复内容
- 重复页面
- 内啡肽
- seo习惯
- seo专家
- seo思维塑造
- 互联网名词
- it专属名词
- 360算法