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

發(fā)布時(shí)間：2021-11-30 14:59:26 作者：ChokCoco

本文主要介紹了利用CSS中的conic-gradient()以及box-shadow模擬出光源陰影效果，從而實(shí)現(xiàn)一個(gè)充滿高級(jí)感的背景光動(dòng)畫，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

實(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è)陰影的，但是實(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;
    }
}

這樣，我們就實(shí)現(xiàn)了完整的一處光的動(dòng)畫：