css3實現的文字顏色漸變和漸隱效果

antzone發表於2017-03-14
CSSS3

分享一段程式碼例項，它實現了文字顏色漸變和漸隱效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  padding: 20px;
  margin-bottom: 20px;
   width:200px;
}
.text p {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient( to bottom, #9588dd, #9588DD 22px, #DD88C8 22px, #DD88C8 44px, #D3DD88 44px, #D3DD88 66px, #88B0DD 66px, #88B0DD);
  line-height: 22px;
  
}
.text2 {
  background: #333;
  color: #fff;
}
.text2 p {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient( to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.8) calc(100% - 50%), rgba(255,255,255,0.6) calc(100% - 50%), rgba(255,255,255,0.6) calc(100% - 40%), rgba(255,255,255,0.4) calc(100% - 40%), rgba(255,255,255,0.4) calc(100% - 30%), rgba(255,255,255,0.2) calc(100% - 20%), rgba(255,255,255,0.2));
}
.text3 {
  background: #333;
}
.text3 p {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient( to bottom, #9588dd, #9588DD 10%, #DD88C8 20%, #D3DD88 40%, #63d393 60%, #88B0DD 80%, #88B0DD);
}
</style>
</head>
<body>
 
  <div class='text'>
    <p>本站的url地址是<a href="http://www.softwhy.com" target="_blank">www.softwhy.com</a>，歡迎大家提供有益的建議和意見。</p>
  </div>
  <div class='text2'>
    <p>本站的url地址是<a href="http://www.softwhy.com" target="_blank">www.softwhy.com</a>，歡迎大家提供有益的建議和意見。</p>
  </div>
  <div class='text3'>
    <p>本站的url地址是<a href="http://www.softwhy.com" target="_blank">www.softwhy.com</a>，歡迎大家提供有益的建議和意見。</p>
  </div>
</body>
</html>

相關文章