漸變文字效果

用處

可用于網站的logo

基本思路

通過把文字設置為透明, 使用漸變背景, 利用剪裁背景為文字來實現效果

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
  • 其中-webkit-text-fill-color: transparent;, 也可以改為color: transparent;

效果

Paste_Image.png

參考

Gradient Text

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 顯示效果 html css
    SheldonYu閱讀 279評論 0贊 0
  • 選擇qi：是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    wzhiq896閱讀 1,803評論 0贊 2
  • 選擇qi：是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    love2013閱讀 2,335評論 0贊 11
  • 此刻我正做在回家的大巴車上，看著一起參加寫作的小伙伴們紛紛交了第一次作業，自己的內心有點著急。著急什么呢？著急自己...
    xinweihuang閱讀 236評論 0贊 0
  • 閑來無事在家里涂涂畫畫。昨天給老爸買了個保溫杯，外包裝的紙盒是一水的純白色，身材修長，覺得再適合做花瓶不過，雖然材...
    糖和香料閱讀 431評論 0贊 2