1. 程式人生 > >CSS漸變-快來感受CSS的偉大吧(差點閃瞎我的狗眼)

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>

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

友情提示,不要看太久,會想吐。我已經在廁所了