如圖所示，這是一個很炫酷的卡片效果，關鍵效果在於卡片的邊框呈漸變色變化着，在網頁中有這樣一個卡片相信可以極大的增強用户體驗交互。本次文章將解讀如何使用純CSS實現這個炫酷的卡片效果。

基於上面的動圖可以分析出以下是本次實現的主要幾點：

• 卡片的邊框是漸變色
• 卡片的邊框呈順時針動畫
• 卡片底部還有陰影隨着邊框動畫而變化
• 鼠標懸停時動畫隱藏顯示靜態的卡片

實現過程

看到這樣的邊框首先要想到的是CSS本身是不支持這種效果的，所以需要從其他的地方入手，其實實現的方式很簡單，卡片黑色內容區域是一個獨立的盒子，看到的漸變邊框區域是另一個盒子，只不過內容區域的層級更高且四周都空出了邊框的距離，所以肉眼看到的是邊框。

基於此再給漸變區域增加旋轉的動畫和陰影即可完成整個動畫效果。

接下來開始具體的代碼實現過程。

界面佈局

html部分考慮最簡單的實現，只需要一個div，內部即是卡片要展示的內容。上面所提到的漸變動畫以及陰影部分我們都基於偽元素實現，這裏的效果也很符合偽元素的意義，所以不需要額外增加元素。

<div class="card">
  Magic Card
</div>

動畫實現

首先給偽元素設置漸變的背景色，使用 linear-gradient 實現，代碼如下，這裏通過 @property 設置了 --rotate 旋轉角度的變量，方便後續對偽元素增加動畫的操作：

@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

.card::before {
  content: "";
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
}

漸變區域部分採用定位的方式，父級 .card 設置 position: relative;，偽元素則設置 position: absolute;，再增加 z-index: -1; 即可將偽元素的層級置為底層。

這個時候漸變的偽元素因為層級的原因就不可見了，這時我們增加偽元素的區域大小且調整定位的 top 值和 left 值將漸變的元素顯示出來。

.card::before {
  width: 104%;
  height: 102%;
  top: -1%;
  left: -2%;
}

漸變的邊框就出現了，但這時候還是禁止的，基於此繼續增加旋轉的動畫。旋轉動畫就是設置 --rotate 從 0deg 到 360deg，並給偽元素設置 animation: spin 2.5s linear infinite;，設置動畫的執行時間次數以及動畫曲線。

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

到此邊框區域的代碼就完成了，整體代碼如下：

.card::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
  position: absolute;
  z-index: -1;
  top: -1%;
  left: -2%;
  animation: spin 2.5s linear infinite;
}

增強陰影

此時似乎還有一些生硬，繼續給卡片增加底部陰影的動畫效果，陰影部分用 after 偽元素實現，定位和漸變的邏輯還是一樣，在 before 偽元素的基礎上進一步調整偽元素的區域大小和位置，因為我們只是實現在卡片下方有陰影的效果，所以整個區域偏下方且內容變小，為什麼區域變小請繼續看。內容變小使用 transform: scale(0.8);，增加top是元素靠下方：

.card::after {
  position: absolute;
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transform: scale(0.8);
}

此時的界面效果如下圖所示：

説好的陰影部分呢？來到關鍵的代碼，這裏我們使用 filter 給偽元素增加一個 blur 模糊的濾鏡效果，只需要這一行代碼瞬間就提升了整體的交互效果。

 filter: blur(calc(var(--card-height) / 6));

陰影部分整體的代碼如下：

.card::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
  background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
    opacity: 1;
  transition: opacity .5s;
  animation: spin 2.5s linear infinite;
}

懸停效果

當鼠標懸停的時候要顯示內容隱藏邊框和陰影，偽元素的隱藏好處理，直接設置透明度 opacity： 0 即可。但是這裏的內容區域為什麼默認是沒有顯示呢？不是層級是高於偽元素嗎？這裏是給內容區域的文字設置顏色的透明度，默認是0所以不顯示。

color: rgb(88 199 250 / 0%);

所以當懸停的時候將透明度設置為100%即可，為了讓過渡更平滑增加了 transition，偽元素也同樣的增加了 transition 讓切換的動畫更平滑。

transition: color 1s;

鼠標懸停時整體的代碼如下：

.card:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
.card:hover:before, .card:hover:after {
  animation: none;
  opacity: 0;
}

最後

本文解析了通過純 CSS 實現這個很炫酷的卡片效果，卡片的邊框呈漸變色不斷變化，極大的提升了用户的交互體驗。有興趣的朋友可以嘗試看看~

關注公眾號回覆【20231112】可獲取完整源代碼~

看完本文如果覺得有用，記得點個贊支持，收藏起來説不定哪天就用上啦～

專注前端開發，分享前端相關技術乾貨，公眾號：南城大前端（ID: nanchengfe）

參考

動畫效果發佈者 Gayane Gasparyan ：https://codepen.io/gayane-gasparyan/pen/jOmaBQK