大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍了css3实现文字渐变的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
你所需要的网站建设服务,我们均能行业靠前的水平为你提供.标准是产品质量的保证,主要从事网站设计、成都网站制作、企业网站建设、成都做手机网站、网页设计、成都品牌网站建设、网页制作、做网站、建网站。创新互联建站拥有实力坚强的技术研发团队及素养的视觉设计专才。
在开发过程中,UI设计师经常会设计一些带渐变文字的设计图,给到我们程序员,而我们程序员们呢,大多都是默默地叹息传来,不过CSS3的诞生,解决了前端开发过程中的好多个难题,比如动画,遮罩等等
1. 我们今天要实现的就是使用纯CSS实现渐变文字,下面是预览图片:
2. 基础样式:
.gradient-text{ text-align: left; text-indent:30px; line-height: 50px; font-size:40px; font-weight:bolder; position: relative; }
3. 第一种方法,使用 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; }
4. 第二种方法,使用 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))); }
5.第三种方法,使用 linearGradient、fill:
.gradient-text-three{ fill:url(#SVGID_1_); font-size:40px; font-weight:bolder; }
6. 该DEMO全部代码:
CSS3渐变字体 方法1. background-clip + text-fill-color
花样年华
方法2. mask-image
豆蔻年华
方法3. svg linearGradient
感谢你能够认真阅读完这篇文章,希望小编分享css3实现文字渐变的方法内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!