css奇技淫巧-色彩漸變與動態漸變

Simmzl發表於2019-04-19
CSS

漸變色已經很常見了，如何把漸變色做成動態變化或者做出更酷炫的效果？

css漸變

CSS 中設定的漸變是 gradient 資料型別，它是一種特別的image資料型別。使用background-image設定，可疊加設定多個；

CSS3 定義了兩種型別的漸變（gradients）：

線性漸變 linear-gradient()

漸變的實現由兩部分組成：漸變線和色標。漸變線用來控制發生漸變的方向；色標包含一個顏色值和一個位置，用來控制漸變的顏色變化。瀏覽器從每個色標的顏色淡出到下一個，以建立平滑的漸變，通過確定多個色標可以製作多色漸變效果。 使用漸變色做背景已經很常見了：

background: linear-gradient(direction/angle, color-stop1, color-stop2, ...);
複製程式碼

方向（direction）

從上到下（預設情況下）

.foo {
    width: 100px;
    height: 100px;
    background: linear-gradient(green, yellow);
}
複製程式碼

從左到右

從右到左同理。 相容性原因，不同瀏覽器寫法不同：

.foo {
    background: linear-gradient(to right, green, yellow); /* 標準的語法 */
    background: -webkit-linear-gradient(left, green, yellow); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, green, yellow); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, green, yellow); /* Firefox 3.6 - 15 */
}
複製程式碼

對角

.foo {
    background: linear-gradient(to bottom right, green, yellow); /* 標準的語法 */
    background: -webkit-linear-gradient(left top, green, yellow); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, green, yellow); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, green, yellow); /* Firefox 3.6 - 15 */
}
複製程式碼

角度（deg）

css奇技淫巧-色彩漸變與動態漸變

0deg 將建立一個從下到上的漸變，90deg 將建立一個從左到右的漸變。

色標 (color-stop)

由一個color值組成，並且跟隨著一個可選的終點位置（可以是一個百分比值或者是沿著漸變軸的length）。

未設定位置時預設情況下顏色均勻分佈。

有時候我們不希望一開始就出現漸變，可以從中間某個地方開始最好。這時候就可以使用百分比等了。

.foo {
    width: 200px;
    height: 100px;
    background: linear-gradient(to right, green, white 10%, yellow);
    /* background: linear-gradient(to right, green, white 20px, yellow); 等同 */
}
複製程式碼

使用百分比：

使用長度：

中間的白色從容器10%的位置開始漸變，擠壓了綠色區域；

徑向漸變 radial-gradient()

.foo {
    background-image: radial-gradient(shape size at position, start-color, ..., last-color);
}
複製程式碼

shape

  • ellipse (預設): 橢圓形

  • circle ：圓形

.foo {
    background-image: radial-gradient(red, yellow, green);
}
複製程式碼
.foo {
    background-image: radial-gradient(circle, red, yellow, green);
}
複製程式碼

size

定義漸變的大小:

  • farthest-corner (預設) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

    .foo {
    background-image: radial-gradient(ellipse farthest-corner at 80px 50px, red, yellow, green);
}
複製程式碼

  • closest-side ：漸變的邊緣形狀與容器距離漸變中心點最近的一邊相切（圓形）或者至少與距離漸變中心點最近的垂直和水平邊相切（橢圓）。

    .foo {
    background-image: radial-gradient(closest-side at 80px 50px, red, yellow, green);
}

.bar {
    background-image: radial-gradient(circle closest-side at 80px 50px, red, yellow, green);
}
複製程式碼

    漸變橢圓與距中心點最近的垂直和水平邊相切：

    漸變圓與距中心點最近的垂直和水平邊相切：

  • closest-corner ： 指定徑向漸變的半徑長度為從圓心到離圓心最近的角

  • farthest-side ：與closest-side相反，邊緣形狀與容器距離漸變中心點最遠的一邊相切（或最遠的垂直和水平邊）。

position

position與background-position或者transform-origin類似。如預設，預設為中心點center。

color

與linear-gradient相似， color + 一個百分比值或者length;

重複漸變 repeating

repeating-linear-gradient()

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
複製程式碼
background-image: repeating-linear-gradient(90deg, red, yellow 10%);">
複製程式碼

有趣的玩法：

.foo {
    width: 200px;
    height: 100px;
    background-image: repeating-linear-gradient(45deg, orange, orange 25px, #FFF 25px, #FFF 50px);
}
複製程式碼

45deg:

.

大佬使用漸變製作的近百個滑塊示例: 滑塊示例

repeating-radial-gradient()

通過使用background疊加，實現唱片效果：

<div class='record'></div>
複製程式碼
.record {
    position: relative;
    margin: 0 auto;
    width: 260px; height: 260px;
    border-radius: 50%;
    background:
        linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0,
        linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%,
        repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
    background-size: 50% 100%, 100% 50%, 100% 100%;
    box-shadow: 5px 10px 20px #ccc;
}
.record:after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -35px;
    border: solid 1px #d9a388;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #da5b33,
        inset 0 0 0 27px #da5b33;
    background: #fff;
    content: '';
}
複製程式碼

附上：張鑫旭-10個demo示例學會CSS3 radial-gradient徑向漸變

動態變化

通過預先設定好漸變，通過animation移動background-position來呈現漸變動態變化的效果。為了使動畫首尾看上去無縫銜接，漸變的首尾顏色需相同；

<div class="dynamics"></div>
複製程式碼
.dynamics {
    width: 100%;
    height: 100px;
    background: linear-gradient(90deg, #496eaa, #944fa8, #a8804f, #944fa8, #496eaa);
    background-size: 1400% 300%;
    animation: dynamics 20s ease infinite;
    -webkit-animation: dynamics 20s ease infinite;
    -moz-animation: dynamics 20s ease infinite;
}
@keyframes dynamics {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 50% 100%;
    }

    100% {
        background-position: 100% 0%;
    }
}
複製程式碼

參考

MDN-linear-gradient

MDN-radial-gradient

效果

原文發表於自己的blog：柴犬工作室CQ STUDIO

效果可在我的部落格這邊文章上看到，掘金上沒法寫動畫～

相關文章