CSS動態漸變色邊框圍繞內容區域旋轉的效果(實例代碼)

2024-07-11 09:00:26

字體：大中小

來源：轉載

供稿：網友

效果圖

在網上查閱相關資料后，發現目前的動態漸變色邊框的實現方式大部分為使用偽元素比內容區域大一圈然后橫向移動漸變色背景的方式實現，而沒有漸變色邊框圍繞內容區域進行旋轉的效果，于是我做了一個這樣的demo供大家參考。

實現原理

首先將內容區域嵌套進一個DIV盒子中并設置overflow：hidden;。這個盒子的大小是內容區域的大小加上你希望實現的漸變邊框的寬度，然后將內容區域居中，這樣內容區域和父元素之間就有一個看似是邊框的空白區域。
現在在這個空白區域加一個比父元素更大，背景為漸變色的盒子，將層級設置為最低z-index: -1;。再將這個漸變色背景的盒子加入旋轉動畫就完成了。
看起來頗為繁瑣，實際結構卻非常簡單，只要腦海中能夠有大概的立體感就能立刻明白這其中的原理。

HTML結構

<body>    <!-- 最外層僅起到限制漸變區域大小的作用 -->    <div class="wrap">        <!-- 漸變顯示區域 -->        <div class="bgc"></div>        <!-- 內容 -->        <div class="content"></div>    </div></body>

CSS

<style>        /* 彈性盒子使demo居中 */        body {            margin: 0;            padding: 0;            height: 100vh;            display: flex;            align-items: center;            justify-content: center;        }        /* 最外層的作用是讓中間的.bgc溢出部分隱藏         大小根據內容區域與邊框大小自由調整 */        .wrap {            width: 300px;            height: 300px;            overflow: hidden;            position: relative;            border-radius: 20px;            /* 彈性盒子使content區域居中顯示 */            display: flex;            align-items: center;            justify-content: center;         }        /* 最終動態漸變邊框實際內容 比.wrap大 但是因為溢出部分被隱藏         而中間部分又因為層級關系被.content蓋住         最后只有.wrap和.content之間的縫隙顯示這個旋轉的漸變色背景 */        .bgc {            width: 500px;            height: 500px;            background: linear-gradient(#fff,#448de0);            animation: bgc 1.5s infinite linear;            border-radius: 50%;            position: absolute;             z-index: -1;        }        /* 內容區域 根據自身情況調整大小 */        .content {            width: 250px;            height: 250px;            background-color: #fff;            border-radius: 20px;        } /* 漸變色背景旋轉動畫 */        @keyframes bgc {            0% {                transform: rotateZ(0);            }            100% {                transform: rotateZ(360deg);            }        }    </style>

為了讓大家能更清晰地明白層級關系，我做了個一個3D效果的關系圖，箭頭越靠近指向的方向層級越高。最小實心方塊是內容區域，最大的藍色圓形是進行旋轉的漸變色背景，但是超出中間盒子大小的部分被隱藏掉了。