CSS3實現漸變色字型
阿新 • • 發佈:2019-01-28
前兩天在學習移動端專案,於是就拿京東的移動端頁面來模仿和學習了,
在模仿的過程中,我發現了京東移動端頁面的字型有漸變色,很是好奇,很感興趣,於是就是查看了程式碼,並且百度了一下,發現實現漸變色字型的兩種方法,(目前我自己就發現兩種),
第一種比較簡單,直接上程式碼:
方法一:
html結構
<p class="font1">你好,這是我的漸變色字型</p>
樣式:
.font1{
font-size:22px;
background-image: -webkit-linear-gradient(bottom, rgb(201 , 115, 255), rgb(20, 11, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
效果:
方法二:
html結構:
<h2 class="font2" data-text="漸變色字型一">漸變色字型一</h2>
css樣式:
.font2 {
display: inline-block;
font-family: '微軟雅黑' ;
font-size: 10em;
position: relative;
}
.font2::after {
content: attr(data-text);
color: green;
position: absolute;
left: 0;
z-index: 2;
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000) , to(rgba(0, 0, 255, 0)));
}
效果:
由於這些效果的實現都是依賴webkit核心實現的,所以,這種效果在webkit核心的瀏覽器中會正常顯示,而其他非webkit核心的瀏覽器就沒法正常顯示了,有些會顯示純色,有些會直接顯示黑色字型。