CSS3 線性漸變應用

css3 gradient 分為 linear-gradient（線性漸變）和 radial-gradient（徑向漸變）。而我們今天主要是通過乙個小例子來針對線性漸變來剖析其具體的用法。

今天的例子就是用css3 的線性漸變製作乙個大致的針孔注射器。

首先來看一下最終效果，例子比較簡單，主要應用到的就是css3裡的linear-gradient。

看完demo，我們首先來看一下html結構。

css 部分

.injector_wrap .injector__box .injector__box::before .water .water::before .injector__hat .injector__hat::before .injector__handle .injector__handle::after @-webkit-keyframes autopushwater 50%to }@-o-keyframes autopushwater 50%to }@-moz-keyframes autopushwater 50%to }@keyframes autopushwater 50%to

}

css部分其實也蠻簡單的，其他部分不說了，相信都可以看懂是什麼意思、有什麼用。我們就把這次的核心內容linear-gradient拿出來單獨分析一下。

細心的小夥伴應該會發現，在css中linear-gradient出現了兩種方式，都是webkit字首的。其實兩者都是webkit核心對於linear-gradient的實現，只不過乙個是早期實現-webkit-gradient，乙個是修改後的參照標準的實現-webkit-linear-gradient。

首先我們來分析一下早期實現-webkit-gradient.

-webkit-gradient(linear,left center,right center,from(#80261c), color-stop(0.5,#c0392b), to(#420600));
// 原始語法
-webkit-gradient(, [, ]?, [, ]? [, ]*) //老式語法書寫規則

-webkit-gradient 是webkit引擎對漸變的實現引數，一共有五個。

第乙個引數表示漸變型別（type），可以是linear（線性漸變）或者radial（徑向漸變）。

第二個引數和第三個引數，都是一對值，分別表示漸變起點和終點。這對值可以用座標形式表示，也可以用關鍵值表示，比如 left top（左上角）和left bottom（左下角）。

第四個和第五個引數，分別是兩個color-stop函式。color-stop 函式接受兩個引數，第乙個表示漸變的位置，0為起點，0.5為中點，1為結束點；第二個表示該點的顏色。

如果color-stop第乙個引數是0或者1的話，那麼可以使用from或者to來代替，from、to 只有1個引數——色值。from(hex)效果上等於color-stop(0,hex),而to(hex)等同於color-stop(1,hex)。

所以上面例子中的**可以修改為。

-webkit-gradient(linear,left center,right center,color-stop(0,#80261c), color-stop(0.5,#c0392b), color-stop(1,#420600));
-webkit-gradient(linear,left center,right center,from(#80261c), color-stop(0.5,#c0392b), to(#420600));

在webkit的-webkit-linear-gradient()中不能同時設定位置和角度。可以通過設定顏色中間點達到相同的效果。即如果設定了 left top 和漸變軸角度的話會導致css解析錯誤，無法達到預期效果。

接下來是webkit按照標準實現的漸變-webkit-linear-gradient。

-webkit-linear-gradient(left,#80261c,#c0392b,#420600);
// 原始語法
-webkit-linear-gradient([|| ,]? , [, ]);

-webkit-linear-gradient 有三個引數。

第乙個引數表示線性漸變的方向，top 是從上到下、left 是從左到右，如果定義成 left top，那就是從左上角到右下角。

第二個和第三個引數分別是起點顏色和終點顏色。你還可以在它們之間插入更多的引數，表示多種顏色的漸變。

在標準實現中，取消了from、to、color-stop等函式，開發人員只需定義漸變起點或者漸變軸角度以及漸變的色值即可實現漸變。

注意：漸變起點和漸變軸角度不可同時設定，這樣會引起css解析錯誤，無法達到預期效果。

戚戚然不知所言，到這裡算是收尾了。本篇算是個不折不扣的標題黨，並沒有去分析ff、opera以及ie下的css漸變實現。截至目前為止，ff、opera的實現和webkit的新版實現基本保持一致，唯一的問題則是ie，歷史版本和新版本的ie各有其實現，有興趣的話可以去查詢相關資料學習參考一下。

CSS3 線性漸變應用

css3線性漸變

css3線性漸變

CSS3線性漸變

CSS3 線性漸變應用

css3線性漸變

css3線性漸變

CSS3線性漸變

相關推薦