CSS漸變-快來感覺CSS的偉大吧（差點閃瞎個人狗眼）

  在此，咱們重點用到的就是conic-gradient。conic-gradient不是什麼新鮮東西了，CSS3出的新特性中的一種圓錐形漸變。

  線性漸變（linear-gradient）和徑向漸變(radial-gradient)這兩個是經常使用的。下面是簡單的小案例：

    線性漸變（linear-gradient）                 F12查看代碼

      徑向漸變(radial-gradient）       F12查看代碼

  一個conic-gradient（圓錐形漸變）簡單的案例：

 代碼：

<div style="width: 200px;

                  height: 200px;

                  background-image: conic-gradient(red, orange, yellow, green, teal, blue, purple); text-align: center;"

></div>

看了許多的文檔，發現有不少會運用到錶盤中，效果入下：

 

 

 代碼：

<div style="width: 200px;

 height: 200px;

 background-image: radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%),

conic-gradient(#f1462c 0 12.5%, #fba73e 0 25%, #e0fa4e 0 37.5%, #12dd7e 0 50%, #0a6e3f 0 62.5%, #fff 0 100%);

 border-radius: 50%;

 transform: rotate(-115deg);"

>&nbsp;</div>

</div>

是否是瞬間有了錶盤的味道！！！

這裏面主要用到的是徑向漸變(radial-gradient)和圓錐形漸變（conic-gradient）。

思路就是先用conic-gradient以白色爲始爲終，之間用紅色，橙色，草綠和墨綠以12.5度間隔開來.再用radial-gradient以中點開始漸變，白色爲始，transparent爲終.作中間的白色圓點.rotate旋轉115度.完成上面的效果。

（F12查看代碼）

這裏有一個transparent，就是rgba(0,0,0,0)。也就是全透明黑色。

我忽然有一個大膽的想法！

  代碼：

<div style="width: 200px;

height: 200px;

background-image: radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%),
                               conic-gradient(#fff,#f1462c, #fba73e, #e0fa4e, #12dd7e, #0a6e3f, #fff,#f1462c, #fba73e, #e0fa4e, #12dd7e, #0a6e3f,#fff);

border-radius: 50%;

transform: rotate(-115deg);"

>&nbsp;</div>

 

 

 

 這不就是一個光盤嘛！！或者還能夠讓他旋轉一下！！

 代碼：

<div style="width: 200px;

height: 200px;

background-image: radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%),
                               conic-gradient(#fff,#f1462c, #fba73e, #e0fa4e, #12dd7e, #0a6e3f, #fff,#f1462c, #fba73e, #e0fa4e, #12dd7e, #0a6e3f,#fff);

border-radius: 50%;

animation: divGradient 0.1s infinite;">&nbsp;</div>
<style>
@keyframes divGradient {
from {
transform:rotate(0deg);
}

to {
transform:rotate(180deg);
}
}
</style>

 

 

爲何感受有點像輪胎 emmmmm.....

把寬調整一下，你就得到一個保齡球。若是繼續旋轉，你就得到了一個旋轉的保齡球。(這個剪輯的有點失敗，能夠複製代碼查看效果，體驗感較好）

 

 

 

 

 代碼：

<div style="width: 50px;

height: 200px;

background-image: radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%),
                                conic-gradient(#fff,#f1462c, #fba73e, #e0fa4e, #12dd7e, #0a6e3f, #fff,#f1462c, #fba73e, #e0fa4e, #12dd7e, #0a6e3f,#fff);

border-radius: 50%; animation: divGradient2 0.1s infinite; margin-left: 200px;"

>&nbsp;</div>
<style>
@keyframes divGradient2 {
from {
transform:rotate(0deg);
}

to {
transform:rotate(180deg);
}
}
</style>

瞎想失敗，這更像是一個再犯腦殘的花花   emmmmm.....

並且這爲何，總是讓我想到洋蔥花emmmmm................

還有這個，總是讓我聯想到用來裝飾用的泡花：

 

 代碼：

 <div style="width: 200px;

height: 200px;

background-image: conic-gradient(#fff,#ccc, #666, #000, #666, #ccc, #fff,#ccc, #666, #000, #666, #ccc, #fff,#ccc, #666, #000, #666, #ccc, #fff);

border-radius: 50%;

animation: divGradient2 0.1s infinite;

">&nbsp;</div>

<style>
@keyframes divGradient2 {
from {
transform:rotate(0deg);
}

to {
transform:rotate(180deg);
}
}
</style>

當時把這個搞成滿屏，挺震撼的。同時也閃瞎了個人狗眼。

友情提示，不要看過久，會想吐。我已經在廁所了！！