整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
了線性漸變以外，HTML 5 Canvas API還支持徑向漸變（放射性漸變），就是顏色會(huì)介于兩個(gè)指定圓間的錐形區(qū)域平滑變化。徑向漸變和線性漸變使用了顏色終止點(diǎn)是一樣的，如果要實(shí)現(xiàn)它，就需要使用方法createRadialGradient。
繪制徑向漸變
createRadialGradient（x0，y0，r0，x1，y1，r1）方法表示沿著兩個(gè)圓之間的錐面繪制漸變。其中前三個(gè)參數(shù)代表開始的圓，圓心為（x0，y0），半徑為r0。最后三個(gè)參數(shù)代表結(jié)束的圓，圓心為（x1，y1），半徑為r1。
（1）編寫代碼如下圖所示，在<body>標(biāo)簽中加入以下代碼。
（2）在瀏覽器中打開文件，預(yù)覽效果圖如下所示，可以看到網(wǎng)頁中，從圓心的中心亮點(diǎn)開始向外逐步發(fā)散，形成了一個(gè)徑向漸變。
小提示：上面代碼中，首先創(chuàng)建漸變對(duì)象gradient，此處使用方法createRadialGradient創(chuàng)建了一個(gè)徑向漸變，下面使用addColorStop添加顏色，最后將漸變填充到上下文環(huán)境中。
，下面一個(gè)很有意思的 UI 效果：
主要看看這個(gè)頁面的背景，一個(gè)磨砂（毛玻璃）質(zhì)感效果的漸變背景圖，看上去是比較高級(jí)的。
剝離掉頁面的內(nèi)容元素，只剩下背景的話，大概是這樣：
一開始是打算切圖實(shí)現(xiàn)的，但是仔細(xì)一想，這個(gè)效果使用 CSS 其實(shí)也可以非常輕松制作出來。本文就討論討論：
上述背景效果看似復(fù)雜，其實(shí)非常的簡單。它就是：
多塊不規(guī)則漸變背景 + 高斯模糊蒙版
在 CSS 中，也就是借助 background + backdrop-filter: blur() 即可實(shí)現(xiàn)。
去掉疊在上方的 高斯模糊蒙版，背后的元素其實(shí)非常簡單明了。可能就是只是這樣：
這里簡單列下代碼，我們使用了 3 個(gè) div 實(shí)現(xiàn)了 3 個(gè)漸變圖，每個(gè)圖形再使用 clip-path 隨機(jī)裁剪成不規(guī)則的多邊形：
<div class="g-bg">
<div class="g-polygon g-polygon-1"></div>
<div class="g-polygon g-polygon-2"></div>
<div class="g-polygon g-polygon-3"></div>
</div>
.g-polygon {
position: absolute;
opacity: .5;
}
.g-polygon-1 {
// 定位代碼，容器高寬隨意
background: #ffee55;
clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
}
.g-polygon-2 {
// 定位代碼，容器高寬隨意
background: #E950D1;
clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
}
.g-polygon-3 {
// 定位代碼，容器高寬隨意
background: rgba(87, 80, 233);
clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
}
接下來，這一步最為關(guān)鍵，就是使用 backdrop-filter 實(shí)現(xiàn)高斯模糊蒙版。疊在上述幾個(gè)元素上方即可，最關(guān)鍵的一行代碼 backdrop-filter: blur(150px)
.g-bg::before {
content: "";
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
backdrop-filter: blur(150px);
z-index: 1;
}
}
這樣，我們就實(shí)現(xiàn)了如上圖所示的毛玻璃質(zhì)感效果的漸變背景圖：
錄制的 Gif 圖看上去有點(diǎn)糊，你可以戳這里點(diǎn)進(jìn) DEMO 查看 -- CodePen Demo -- Frosted glass background effect[1]
注意，這里使用的是 backdrop-filter: blur()，而不是 filter: blur()，如果你對(duì)這兩個(gè)濾鏡是使用選擇還有所疑惑，可以看看的我的這篇文章講解 -- 深入探討 filter 與 backdrop-filter 的異同[2]
簡單了解了原理之后，我們就可以借助 CSS-doodle 嘗試批量來生成這個(gè)效果了。
CSS-doodle 它是一個(gè)基于 Web-Component 的庫。允許我們快速的創(chuàng)建基于 CSS Grid 布局的頁面，并且提供各種便捷的指令及函數(shù)（隨機(jī)、循環(huán)等等），讓我們能通過一套規(guī)則，得到不同 CSS 效果。感興趣的可以猛擊官網(wǎng)了解 -- CSS-doodle[3]
代碼非常簡單，也非常好理解，就是隨機(jī)場景不同尺寸、不同定位、不同顏色、不同形式的幾個(gè)圖形：
<css-doodle>
:doodle {
@grid: 1x8 / 100vmin;
}
@place-cell: center;
width: @rand(40vmin, 80vmin);
height: @rand(40vmin, 80vmin);
transform: translate(@rand(-200%, 200%), @rand(-60%, 60%)) scale(@rand(.8, 1.8)) skew(@rand(45deg));
clip-path: polygon(
@r(0, 30%) @r(0, 50%),
@r(30%, 60%) @r(0%, 30%),
@r(60%, 100%) @r(0%, 50%),
@r(60%, 100%) @r(50%, 100%),
@r(30%, 60%) @r(60%, 100%),
@r(0, 30%) @r(60%, 100%)
);
background: @pick(#f44336, #e91e63, #9c27b0, #673ab7, #3f51b5, #60569e, #e6437d, #ebbf4d, #00bcd4, #03a9f4, #2196f3, #009688, #5ee463, #f8e645, #ffc107, #ff5722, #43f8bf);
opacity: @rand(.3, .8);
</css-doodle>
上述代碼會(huì)隨機(jī)生成這樣的圖案（GIF 看不出鼠標(biāo)的點(diǎn)擊效果，每次切換是我點(diǎn)擊頁面進(jìn)行的手動(dòng)切換）：
好，配合上蒙版，再看看效果，我們已經(jīng)能夠批量的去生成上述的背景效果了：
如果需求，配合上 hue-rotate 及簡單的位移，我們甚至可以讓這個(gè)漸變背景動(dòng)畫動(dòng)起來，更加生動(dòng)些：
<css-doodle>
// 同上...
position: relative;
top: @rand(-80%, 80%);
left: @rand(-80%, 80%);
animation: colorChange @rand(6.1s, 16.1s) infinite @rand(-.5s, -2.5s) linear alternate;
@keyframes colorChange {
100% {
left: 0;
top: 0;
filter: hue-rotate(360deg);
}
}
</css-doodle>
這樣，我們就得到了帶動(dòng)畫的毛玻璃漸變背景：
GIF 截圖效果較差，完整的代碼及效果體驗(yàn)?zāi)憧梢悦蛽暨@里 -- CodePen Demo -- CSS-doodle Pure CSS Background Effect[4]
好了，本文到此結(jié)束，希望本文對(duì)你有所幫助 :)
如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。
[1]
CodePen Demo -- Frosted glass background effect: https://codepen.io/Chokcoco/pen/mdBKgOK
[2]
深入探討 filter 與 backdrop-filter 的異同: https://github.com/chokcoco/iCSS/issues/147
[3]
CSS-doodle: https://css-doodle.com/
[4]
CodePen Demo -- CSS-doodle Pure CSS Background Effect: https://codepen.io/Chokcoco/pen/gOGKNMm
作者:SbCo
來源-微信公眾號(hào):iCSS前端趣聞
出處:https://mp.weixin.qq.com/s/iVeRwoaJ-cZhe4Z0xp7OiQ
項(xiàng)目中，有很多地方都用到了背景線性漸變。
如果在移動(dòng)端還可以適當(dāng)使用CSS3這個(gè)屬性
比如：黑色漸變到白色，代碼如下：
.gradient{
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
}
linear-gradient 在 ie9 以下是不支持的，所以對(duì)于 ie6 - ie8 我們可以使用濾鏡來解決，代碼如下：
.gradient{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}
.gradient{
background: #000000;
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}
:root .gradient{filter:none;}
在Mozilla 下
background: -moz-linear-gradient( top,#ccc,#000);
參數(shù)說明
1,起點(diǎn)位置top 是從上到下,left是從左到右,left top是左上到右下
2,開始顏色,
3,結(jié)束顏色
在Webkit下
-webkit-linear-gradient(top,#ccc,#000);
參數(shù)與mozilla一致
在 Opera 下
background: -o-linear-gradient(top,#ccc, #000);
數(shù)與mozilla一致
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
