温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css3怎么实现文字渐变效果

发布时间:2022-03-02 15:26:04 来源:亿速云 阅读:282 作者:iii 栏目:web开发

本篇内容介绍了“css3怎么实现文字渐变效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

  基础样式:

  .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;

  }

  第二种方法,使用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,00,0bottom,from(yellow),to(rgba(0,0,255,0)));

  }

  第三种方法,使用linearGradient、fill:

  .gradient-text-three{

  fill:url(#SVGID_1_);

  font-size:40px;

  font-weight:bolder;

  }

  <svgviewBoxs="00500300"class="svgBox">

  <defs>

  <linearGradientid="SVGID_1_"gradientUnits="userSpaceOnUse"x1="0"y1="10"x2="0"y2="50">

  <stopoffset="0"style="stop-color:yellow"/>

  <stopoffset="0.5"style="stop-color:#fd8403"/>

  <stopoffset="1"style="stop-color:red"/>

  </linearGradient>

  </defs>

  <texttext-anchor="middle"class="gradient-text-three"x="110px"y="30%">花信年华</text>

  </svg>

  该DEMO全部代码:

  <!DOCTYPEhtml>

  <html>

  <head>

  <metacharset="utf-8">

  <metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

  <title>CSS3渐变字体</title>

  <linkrel="stylesheet"href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <scriptsrc="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

  <scriptsrc="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <styletype="text/css">

  *{margin:0;padding:0;}

  body,html{width:100%;height:100%;}

  .wrapper{width:80%;margin:0auto;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,00,0bottom,from(yellow),to(rgba(0,0,255,0)));

  }

  .gradient-text-three{

  fill:url(#SVGID_1_);

  font-size:40px;

  font-weight:bolder;

  }

  </style>

  </head>

  <body>

  <sectionclass="wrapper">

  <divclass="panelpanel-info">

  <divclass="panel-heading">

  <h4class="panel-title">方法1.background-clip+text-fill-color</h4>

  </div>

  <divclass="panel-body">

  <h4class="gradient-textgradient-text-one">花样年华</h4>

  </div>

  </div>

  <divclass="panelpanel-warning">

  <divclass="panel-heading">

  <h4class="panel-title">方法2.mask-image</h4>

  </div>

  <divclass="panel-body">

  <h4class="gradient-textgradient-text-two"data-content="豆蔻年华">豆蔻年华</h4>

  </div>

  </div>

  <divclass="panelpanel-danger">

  <divclass="panel-heading">

  <h4class="panel-title">方法3.svglinearGradient</h4>

  </div>

  <divclass="panel-body">

  <svgviewBoxs="00500300"class="svgBox">

  <defs>

  <linearGradientid="SVGID_1_"gradientUnits="userSpaceOnUse"x1="0"y1="10"x2="0"y2="50">

  <stopoffset="0"style="stop-color:yellow"/>

  <stopoffset="0.5"style="stop-color:#fd8403"/>

  <stopoffset="1"style="stop-color:red"/>

  </linearGradient>

  </defs>

  <texttext-anchor="middle"class="gradient-text-three"x="110px"y="30%">花信年华</text>

  </svg>

  </div>

  </div>

  </section>

  </body>

  </html>

css3怎么实现文字渐变效果

css3怎么实现文字渐变效果

css3怎么实现文字渐变效果

“css3怎么实现文字渐变效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI