巧用漸變實(shí)現(xiàn)高級(jí)感拉滿的背景光動(dòng)畫
背景
在上一篇 巧用濾鏡實(shí)現(xiàn)高級(jí)感拉滿的文字快閃切換效果[1] 中，我們提到了一種非常有意思的之前蘋果展示文字的動(dòng)畫效果。
本文，會(huì)帶來另外一個(gè)有意思的效果，巧用漸變實(shí)現(xiàn)高級(jí)感拉滿的背景光動(dòng)畫。此效果運(yùn)用在蘋果官網(wǎng) iPhone 13 Pro[2] 的介紹頁中：
實(shí)現(xiàn)
這個(gè)效果想利用 CSS 完全復(fù)制是比較困難的。CSS 模擬出來的光效陰影相對(duì)會(huì) Low 一點(diǎn)，只能說是盡量還原。
其實(shí)每組光都基本是一樣的，所以我們只需要實(shí)現(xiàn)其中一組，就幾乎能實(shí)現(xiàn)了整個(gè)效果。
觀察這個(gè)效果：
它的核心其實(shí)就是角向漸變 -- conic-gradient()，利用角向漸變，我們可以大致實(shí)現(xiàn)這樣一個(gè)效果：
- <div></div>
- div {
- width: 1000px;
- height: 600px;
- background:
- conic-gradient(
- from -45deg at 400px 300px,
- hsla(170deg, 100%, 70%, .7),
- transparent 50%,
- transparent),
- linear-gradient(-45deg, #060d5e, #002268);
- }
看看效果：
有點(diǎn)那意思了。當(dāng)然，仔細(xì)觀察，漸變的顏色并非是由一種顏色到透明就結(jié)束了，而是顏色 A -- 透明 -- 顏色 B，這樣，光源的另一半并非就不會(huì)那么生硬，改造后的 CSS 代碼：
- div {
- width: 1000px;
- height: 600px;
- background:
- conic-gradient(
- from -45deg at 400px 300px,
- hsla(170deg, 100%, 70%, .7),
- transparent 50%,
- hsla(219deg, 90%, 80%, .5) 100%),
- linear-gradient(-45deg, #060d5e, #002268);
- }
我們?cè)诮窍驖u變的最后多加了一種顏色，得到觀感更好的一種效果：
emm，到這里，我們會(huì)發(fā)現(xiàn)，僅僅是角向漸變 conic-gradient() 是不夠的，它無法模擬出光源陰影的效果，所以必須再借助其他屬性實(shí)現(xiàn)光源陰影的效果。
這里，我們會(huì)很自然的想到 box-shadow。這里有個(gè)技巧，利用多重 box-shadow， 實(shí)現(xiàn) Neon 燈的效果。
我們?cè)偌觽€(gè) div，通過它實(shí)現(xiàn)光源陰影：
- <div class="shadow"></div>
- .shadow {
- width: 200px;
- height: 200px;
- background: #fff;
- box-shadow:
- 0px 0 .5px hsla(170deg, 95%, 80%, 1),
- 0px 0 1px hsla(170deg, 91%, 80%, .95),
- 0px 0 2px hsla(171deg, 91%, 80%, .95),
- 0px 0 3px hsla(171deg, 91%, 80%, .95),
- 0px 0 4px hsla(171deg, 91%, 82%, .9),
- 0px 0 5px hsla(172deg, 91%, 82%, .9),
- 0px 0 10px hsla(173deg, 91%, 84%, .9),
- 0px 0 20px hsla(174deg, 91%, 86%, .85),
- 0px 0 40px hsla(175deg, 91%, 86%, .85),
- 0px 0 60px hsla(175deg, 91%, 86%, .85);
- }
OK，光是有了，但問題是我們只需要一側(cè)的光，怎么辦呢?裁剪的方式很多，這里，我介紹一種利用 clip-path 進(jìn)行對(duì)元素任意空間進(jìn)行裁切的方法：
- .shadow {
- width: 200px;
- height: 200px;
- background: #fff;
- box-shadow: .....;
- clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
- }
原理是這樣的：
這樣，我們就得到了一側(cè)的光：
這里，其實(shí) CSS 也是有辦法實(shí)現(xiàn)單側(cè)陰影的(你所不知道的 CSS 陰影技巧與細(xì)節(jié)[3])，但是實(shí)際效果并不好，最終采取了上述的方案。
接下來，就是利用定位、旋轉(zhuǎn)等方式，將上述單側(cè)光和角向漸變重疊起來，我們就可以得到這樣的效果：
這會(huì)，已經(jīng)挺像了。接下來要做的就是讓整個(gè)圖案，動(dòng)起來。這里技巧也挺多的，核心還是利用了 CSS @Property，實(shí)現(xiàn)了角向漸變的動(dòng)畫，并且讓光動(dòng)畫和角向漸變重疊起來。
我們需要利用 CSS @Property 對(duì)代碼漸變進(jìn)行改造，核心代碼如下：
- <div class="wrap">
- <div class="shadow"></div>
- </div>
- @property --xPoint {
- syntax: '<length>';
- inherits: false;
- initial-value: 400px;
- }
- @property --yPoint {
- syntax: '<length>';
- inherits: false;
- initial-value: 300px;
- }
- .wrap {
- position: relative;
- margin: auto;
- width: 1000px;
- height: 600px;
- background:
- conic-gradient(
- from -45deg at var(--xPoint) var(--yPoint),
- hsla(170deg, 100%, 70%, .7),
- transparent 50%,
- hsla(219deg, 90%, 80%, .5) 100%),
- linear-gradient(-45deg, #060d5e, #002268);
- animation: pointMove 2.5s infinite alternate linear;
- }
- .shadow {
- position: absolute;
- top: -300px;
- left: -330px;
- width: 430px;
- height: 300px;
- background: #fff;
- transform-origin: 100% 100%;
- transform: rotate(225deg);
- clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
- box-shadow: ... 此處省略大量陰影代碼;
- animation: scale 2.5s infinite alternate linear;
- }
- @keyframes scale {
- 50%,
- 100% {
- transform: rotate(225deg) scale(0);
- }
- }
- @keyframes pointMove {
- 100% {
- --xPoint: 100px;
- --yPoint: 0;
- }
- }
這樣，我們就實(shí)現(xiàn)了完整的一處光的動(dòng)畫：
我們重新梳理一下，實(shí)現(xiàn)這樣一個(gè)動(dòng)畫的步驟：
- 利用角向漸變 conic-gradient 搭出基本框架，并且，這里也利用了多重漸變，角向漸變的背后是深色背景色;
- 利用多重 box-shadow 實(shí)現(xiàn)光及陰影的效果(又稱為 Neon 效果)
- 利用 clip-path 對(duì)元素進(jìn)行任意區(qū)域的裁剪
- 利用 CSS @Property 實(shí)現(xiàn)漸變的動(dòng)畫效果
剩下的工作，就是重復(fù)上述的步驟，補(bǔ)充其他漸變和光源，調(diào)試動(dòng)畫，最終，我們就可以得到這樣一個(gè)簡(jiǎn)單的模擬效果：
由于原效果是 .mp4，無法拿到其中的準(zhǔn)確顏色，無法拿到陰影的參數(shù)，其中顏色是直接用的色板取色，陰影則比較隨意的模擬了下，如果有源文件，準(zhǔn)確參數(shù)，可以模擬的更逼真。
完整的代碼你可以戳這里：CodePen -- iPhone 13 Pro Gradient[4]
最后
本文更多的是圖一樂呵，實(shí)際中制作上述效果肯定是有更為優(yōu)雅的解法，并且利用 CSS 模擬的話，也應(yīng)該有更好的方法，這里我僅僅是拋磚引玉，過程中的 1、2、3、4 技巧本身有一些還是值得借鑒學(xué)習(xí)的。
好了，本文到此結(jié)束，希望本文對(duì)你有所幫助 :)
參考資料
[1]巧用濾鏡實(shí)現(xiàn)高級(jí)感拉滿的文字快閃切換效果:
https://github.com/chokcoco/iCSS/issues/149
[2]蘋果官網(wǎng) iPhone 13 Pro: 巧用漸變實(shí)現(xiàn)高級(jí)感拉滿的背景光動(dòng)畫
[3]你所不知道的 CSS 陰影技巧與細(xì)節(jié):
https://github.com/chokcoco/iCSS/issues/39
[4]CodePen -- iPhone 13 Pro Gradient:
https://codepen.io/Chokcoco/pen/xxLzmmZ
