Python微信訂餐小程序課程視頻

https://edu.csdn.net/course/detail/36074

Python實戰(zhàn)量化交易理財系統(tǒng)

https://edu.csdn.net/course/detail/35475
最近有個小伙伴問我，在某個網(wǎng)站看到一個使用 SVG 實現(xiàn)的炫彩三角邊框動畫，問能否使用 CSS 實現(xiàn)：

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

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

然而，這個三角形動畫里有兩個難點：

整個圖形是個三角形

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

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

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

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

通過角向漸變實現(xiàn)主體動畫

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

<div>div> @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;} }

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

當然，如果這里覺得 CSS @Property 不好理解或者擔心兼容性問題，可以替換成利用偽元素實現(xià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); }

即可得到如下效果：

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

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

完整的代碼你可以戳這里 – CodePen Demo – Pure CSS Linear Triangle

但是，這樣做有兩個致命問題：

如果背景色不是實色而是漸變色，這個方法就失效了

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

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

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

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

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

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

當然，這里需要對 mask 掌握的比較深入，要使用 mask 切割一個內(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;} }

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

利用 drop-shadow 添加上光影

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

<div class="g-container"><div class="g-triangle">div> div> @property --angle {syntax: '';inherits: false;initial-value: 0deg; } .g-container {width: 260px;height: 260px;filter: drop-shadow(0 0 5px hsl(162, 100%, 58%)) drop-shadow(0 0 10px hsl(270, 73%, 53%)); } .g-triangle {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;} }

這里又是一個小技巧，drop-shadow 是可以重復(fù)添加多個的，這里添加的兩個陰影顏色就是 conic-gradient() 里設(shè)置的顏色，最終，我們就得到了題圖所示效果：

完整的代碼你可以戳這里 – CodePen Demo – Pure CSS Glowing Triangle

使用 clip-path 剪切環(huán)形三角形

上面利用了 clip-path 剪切外三角形，mask 鏤空內(nèi)三角形，經(jīng)提醒，其實 clip-path 可以獨自裁剪出一個環(huán)形三角形。

上述代碼也可以簡化成：

<div class="g-container"><div class="g-triangle">div> div> @property --angle {syntax: '';inherits: false;initial-value: 0deg; } .g-container {width: 260px;height: 260px;filter: drop-shadow(0 0 5px hsl(162, 100%, 58%)) drop-shadow(0 0 10px hsl(270, 73%, 53%)); } .g-triangle {width: 200px;height: 200px;clip-path: polygon(50% 0%,0% 100%,8% 100%,50% 15%,88% 93%,7% 93%,7% 100%,100% 100%);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;} }

效果一樣：

完整的代碼你可以戳這里 – CodePen Demo – Pure CSS Glowing Triangle

這里有必要講解一下，使用 clip-path 切割一個環(huán)形圖案，是可以做到的。假設(shè)，我們需要一個正方形環(huán)形，其點順序如下：

{clip-path: polygon(0% 0%,0% 100%,25% 100%,25% 25%,75% 25%,75% 75%,25% 75%,14% 100%,100% 100%,100% 0%); }

即可得到：

同理，需要得到一個三角形環(huán)形，只需要 7 個點即可：

{clip-path: polygon(50% 0%,0% 100%,13% 100%,50% 20%,85% 90%,8% 90%,8% 100%,100% 100%); }

效果如下：

這里有個很好用的工具，輔助制作 clip-path 圖形， 感興趣可以試下：CSS clip-path Editor

最后

了解上述完整代碼，你可能還需要補齊一些基礎(chǔ) CSS 知識，可以按需點進去了解：

• clip-path：奇妙的 CSS shapes(CSS圖形)
• CSS @property 自定義屬性：CSS @property，讓不可能變可能
• 利用 drop-shadow 生成不規(guī)則圖形的光源及邊框: 妙用 drop-shadow 實現(xiàn)線條光影效果

好了，本文到此結(jié)束，希望本文對你有所幫助 😃

更多精彩 CSS 技術(shù)文章匯總在我的 Github – iCSS ，持續(xù)更新，歡迎點個 star 訂閱收藏。

如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。

想 Get 到最有意思的 CSS 資訊，千萬不要錯過我的 iCSS 公眾號 😄 ：

如果覺得文章對您有用，請隨意打賞。您的支持將鼓勵我繼續(xù)創(chuàng)作！打賞支持+## (^_)打個賞喝個咖啡(^_)

總結(jié)

以上是生活随笔為你收集整理的巧用 CSS 实现炫彩三角边框动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。