巧用漸變實(shí)現(xiàn)高級(jí)感拉滿的背景光動(dòng)畫

作者：SbCoco 2021-11-15 07:45:06

本文，會(huì)帶來(lái)另外一個(gè)有意思的效果，巧用漸變實(shí)現(xiàn)高級(jí)感拉滿的背景光動(dòng)畫。這個(gè)效果想利用 CSS 完全復(fù)制是比較困難的。CSS 模擬出來(lái)的光效陰影相對(duì)會(huì) Low 一點(diǎn)，只能說(shuō)是盡量還原。

[[434959]]

背景

在上一篇巧用濾鏡實(shí)現(xiàn)高級(jí)感拉滿的文字快閃切換效果[1] 中，我們提到了一種非常有意思的之前蘋果展示文字的動(dòng)畫效果。

本文，會(huì)帶來(lái)另外一個(gè)有意思的效果，巧用漸變實(shí)現(xiàn)高級(jí)感拉滿的背景光動(dòng)畫。此效果運(yùn)用在蘋果官網(wǎng) iPhone 13 Pro[2] 的介紹頁(yè)中：

[[434960]]

實(shí)現(xiàn)

這個(gè)效果想利用 CSS 完全復(fù)制是比較困難的。CSS 模擬出來(lái)的光效陰影相對(duì)會(huì) Low 一點(diǎn)，只能說(shuō)是盡量還原。

其實(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() 是不夠的，它無(wú)法模擬出光源陰影的效果，所以必須再借助其他屬性實(shí)現(xiàn)光源陰影的效果。

這里，我們會(huì)很自然的想到 box-shadow。這里有個(gè)技巧，利用多重 box-shadow，實(shí)現(xiàn) Neon 燈的效果。

我們?cè)偌觽€(gè) div，通過(guò)它實(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，光是有了，但問(wèn)題是我們只需要一側(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í)際效果并不好，最終采取了上述的方案。

接下來(lái)，就是利用定位、旋轉(zhuǎn)等方式，將上述單側(cè)光和角向漸變重疊起來(lái)，我們就可以得到這樣的效果：

這會(huì)，已經(jīng)挺像了。接下來(lái)要做的就是讓整個(gè)圖案，動(dòng)起來(lái)。這里技巧也挺多的，核心還是利用了 CSS @Property，實(shí)現(xiàn)了角向漸變的動(dòng)畫，并且讓光動(dòng)畫和角向漸變重疊起來(lái)。

我們需要利用 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; 
    } 
}