漸變色已經很常見了，如何把漸變色做成動態變化或者做出更酷炫的效果？
css 中設定的漸變是 gradient 資料型別，它是一種特別的image資料型別。使用background-image設定，可疊加設定多個；
css3 定義了兩種型別的漸變（gradients）：
漸變的實現由兩部分組成：漸變線和色標。漸變線用來控制發生漸變的方向；色標包含乙個顏色值和乙個位置，用來控制漸變的顏色變化。瀏覽器從每個色標的顏色淡出到下乙個，以建立平滑的漸變，通過確定多個色標可以製作多色漸變效果。 使用漸變色做背景已經很常見了：
background: linear-gradient(direction/angle, color-stop1, color-stop2, ...);
複製**
.foo
複製**
從左到右
從右到左同理。 相容性原因，不同瀏覽器寫法不同：
.foo
複製**
對角
.foo
複製**
0deg 將建立乙個從下到上的漸變，90deg 將建立乙個從左到右的漸變。
由乙個color值組成，並且跟隨著乙個可選的終點位置（可以是乙個百分比值或者是沿著漸變軸的length）。
未設定位置時預設情況下顏色均勻分布。
有時候我們不希望一開始就出現漸變，可以從中間某個地方開始最好。這時候就可以使用百分比等了。
.foo
複製**
使用長度：
中間的白色從容器10%的位置開始漸變，擠壓了綠色區域；
.foo
複製**
.foo
複製**
.foo
複製**
定義漸變的大小:
position與background-position或者transform-origin類似。如預設，預設為中心點center。
與linear-gradient相似， color + 乙個百分比值或者length;
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
複製**
background-image: repeating-linear-gradient(90deg, red, yellow 10%);">
複製**
有趣的玩法：
.foo
複製**
45deg:
大佬使用漸變製作的近百個滑塊示例: 滑塊示例
通過使用background疊加，實現唱片效果：
class='record'>
div>
複製**
.record
.record
:after
複製**
附上：張鑫旭-10個demo示例學會css3 radial-gradient徑向漸變
通過預先設定好漸變，通過animation移動background-position來呈現漸變動態變化的效果。為了使動畫首尾看上去無縫銜接，漸變的首尾顏色需相同；
class="dynamics">
div>
複製**
.dynamics
@keyframes dynamics
50%
100%
}複製**
mdn-radial-gradient
原文發表於自己的blog：柴犬工作室cq studio
效果可在我的部落格這邊文章上看到，掘金上沒法寫動畫～
css奇技淫巧 border radius
官方介紹 瀏覽器支援 ie9 firefox 4 chrome,safari 5 和opera支援border radius屬性。border radius 屬性是乙個最多可指定四個 border radius 屬性的復合屬性 css語法 border radius 1 4 length 1 4 l...
css奇技淫巧 border radius
官方介紹 瀏覽器支援 ie9 firefox 4 chrome,safari 5 和opera支援border radius屬性。border radius 屬性是乙個最多可指定四個 border radius 屬性的復合屬性 css語法 border radius 1 4 length 1 4 l...
shardingJDBC奇技淫巧之動態分庫
眾所周知，shardingjdbc不支援動態分庫分表，需要提前將資料庫的表和庫建立好，根據指定的演算法去將資料插入對應的表和庫。為了滿足業務需求，就出現了各式各樣的動態分庫分表的方法。首先看原始碼 實現方法，首先監聽necos資料來源配置，修改之後，獲取shardingdatasource所有的資料...