如何使用CSS創(chuàng)建炫彩三角邊框動(dòng)畫

這篇文章主要講解了“如何使用CSS創(chuàng)建炫彩三角邊框動(dòng)畫”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何使用CSS創(chuàng)建炫彩三角邊框動(dòng)畫”吧！

網(wǎng)頁設(shè)計(jì)是網(wǎng)站建設(shè)的前奏，好的網(wǎng)頁設(shè)計(jì)更深度的剖析產(chǎn)品和設(shè)計(jì)風(fēng)格定位，結(jié)合最新的網(wǎng)頁設(shè)計(jì)流行趨勢，與WVI應(yīng)用標(biāo)準(zhǔn)，設(shè)計(jì)出具企業(yè)表現(xiàn)力，大器而深穩(wěn)的網(wǎng)站界面設(shè)。創(chuàng)新互聯(lián)于2013年開始,是成都網(wǎng)站建設(shè)公司:提供企業(yè)網(wǎng)站設(shè)計(jì),高端網(wǎng)站設(shè)計(jì),營銷型企業(yè)網(wǎng)站建設(shè)方案,成都響應(yīng)式網(wǎng)站建設(shè)公司,小程序開發(fā),專業(yè)建站公司做網(wǎng)站。

最近有個(gè)小伙伴問我，在某個(gè)網(wǎng)站看到一個(gè)使用 SVG 實(shí)現(xiàn)的炫彩三角邊框動(dòng)畫，問能否使用 CSS 實(shí)現(xiàn)：

很有意思的一個(gè)動(dòng)畫效果，立馬讓我想起了我在 CSS 奇思妙想邊框動(dòng)畫 一文中介紹的邊框動(dòng)畫，非常的類似：

其核心就是利用了角向漸變（conic-gradient），然后將圖案的中心區(qū)域通過覆蓋遮罩一個(gè)小號的圖形實(shí)現(xiàn)。

然而，這個(gè)三角形動(dòng)畫里有兩個(gè)難點(diǎn)：

• 整個(gè)圖形是個(gè)三角形

在 CSS 中，我們可比較輕松的實(shí)現(xiàn)矩形與圓形，但是三角形這里無疑會(huì)棘手很多。

• 整個(gè)邊框還附帶陰影，并且陰影還是在邊框的兩側(cè)

這里看似不復(fù)雜，實(shí)則困難重重，如果采用上述的方法，將圖案的中心區(qū)域通過覆蓋遮罩一個(gè)小號的圖形實(shí)現(xiàn)鏤空，那么另外一側(cè)的陰影如何產(chǎn)生？即便使用 drop-shadow，也會(huì)被覆蓋的內(nèi)側(cè)圖形給遮擋住。

當(dāng)然，CSS 還是可以實(shí)現(xiàn)這個(gè)圖形的，本文就將講解如何使用 CSS 實(shí)現(xiàn)上述炫彩三角邊框動(dòng)畫。

通過角向漸變實(shí)現(xiàn)主體動(dòng)畫

首先，我們還是需要借助角向漸變 conic-gradient 實(shí)現(xiàn)整個(gè)動(dòng)畫的主體。

@property --angle {
  syntax: '';
  inherits: false;
  initial-value: 0deg;
}

div {
    width: 260px;
    height: 260px;
    background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));
    animation: rotate 3s infinite linear;
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

核心就僅僅只是一個(gè)角向漸變圖案，配合 CSS @Property，讓整個(gè)效果旋轉(zhuǎn)起來：

當(dāng)然，如果這里覺得 CSS @Property 不好理解或者擔(dān)心兼容性問題，可以替換成利用偽元素實(shí)現(xiàn)同樣的圖形，然后進(jìn)行 transform: rotate() 旋轉(zhuǎn)，效果一樣。

基于矩形圖形得到三角形

OK，接下來，我們需要基于矩形圖形得到三角形圖形，對于外圈的三角形，我們可以通過 clip-path 切割得到，也非常的簡單：

div {
    width: 260px;
    height: 260px;
    background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));
    animation: rotate 3s infinite linear;
  + clip-path: polygon(0 100%, 100% 100%, 50% 0);
}

即可得到如下效果：

這樣，我們就得到了一個(gè)實(shí)心的三角形。接下來需要先辦法把內(nèi)部給掏空。

最簡單的思路就是，通過疊加一個(gè)小一號的圖形在中間，顏色和背景色一致即可：

但是，這樣做有兩個(gè)致命問題：

• 如果背景色不是實(shí)色而是漸變色，這個(gè)方法就失效了

• 這個(gè)方法實(shí)現(xiàn)的三角形邊框內(nèi)側(cè)無法添加陰影效果

這兩個(gè)缺陷都是不可接受的，所以我們必須尋找真正能夠鏤空中間的方式，鏤空完成后，它的中心得是透明的。

因此，這里我們得使用 mask。

不過使用 mask 基于這樣一個(gè)圖形再實(shí)現(xiàn)一個(gè)小一號的三角形是比較麻煩的，我們相當(dāng)于要實(shí)現(xiàn)這樣一個(gè)鏤空三角形圖形，示意圖如下：

這樣一個(gè)圖形，配合 clip-path，就能得到一個(gè)三角形邊框圖形，啥意思呢，我這里制作了一個(gè)動(dòng)圖示意：

左邊是利用 mask 實(shí)現(xiàn)遮罩后的圖形，右邊是利用 clip-path 切割后的圖形，它們的效果疊加在一起，就能實(shí)現(xiàn)一個(gè)邊框三角形。

當(dāng)然，這里需要對 mask 掌握的比較深入，要使用 mask 切割一個(gè)內(nèi)部鏤空的三角形示意圖如下：

OK，完整的代碼是這樣：

@property --angle {
  syntax: '';
  inherits: false;
  initial-value: 0deg;
}

div {
    width: 260px;
    height: 260px;
    background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
    mask: 
        linear-gradient(117deg, #000 55%, transparent 55%, transparent),
        linear-gradient(-117deg, #000 55%, transparent 55%, transparent),
        linear-gradient(#000, #000);
    mask-position: 0 0, 130px 0, 0 250px;
    mask-size: 130px 250px, 130px 250px, 100% 10px;
    mask-repeat: no-repeat;
    animation: rotate 3s infinite linear;
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

我們就得到了一個(gè)內(nèi)部鏤空的三角形邊框了：

利用 drop-shadow 添加上光影

最后一步就比較簡單了，由于上述三角形已經(jīng)是一個(gè)鏤空圖形，這里直接使用 drop-shadow 給元素加上一層光影效果即可，不過由于使用了 clip-path，直接在原元素上添加的 drop-shadow 無法展示，這個(gè)好解決，我們只需要多套一層結(jié)構(gòu)，將 drop-shadow 添加到父元素上即可：