1. 程式人生 > >CSS3實現漸變色字型

CSS3實現漸變色字型

前兩天在學習移動端專案,於是就拿京東的移動端頁面來模仿和學習了,
在模仿的過程中,我發現了京東移動端頁面的字型有漸變色,很是好奇,很感興趣,於是就是查看了程式碼,並且百度了一下,發現實現漸變色字型的兩種方法,(目前我自己就發現兩種),
第一種比較簡單,直接上程式碼:

方法一:
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核心的瀏覽器就沒法正常顯示了,有些會顯示純色,有些會直接顯示黑色字型。