純CSS絲滑邊框線條動畫

這個網站（minimal-portfolio-swart.vercel.app）發現一個不錯的交互效果，用戶體驗效果很不錯。如上圖所示，這個卡片上有一根白色的線條圍繞著卡片移動，且在線條的卡片內部跟隨這一塊模糊陰影，特別是在線條經過卡片圓角部分有特別絲滑的感覺。

今天的文章就來解析如何實現這種效果，文末附源碼預覽地址。根據示例圖片分析需要實現的功能點如下：

線條跟隨卡片邊框勻速移動
線條內部對應有模糊陰影
圓角部分絲滑動畫

這里為什么單獨說明圓角部分是因為這塊需要特殊處理，請看后面的文章。

思考

看到這個效果首先感覺是絲滑，沿著邊框移動的動畫元素如果是根據當前邊框實時計算而來的話，那么難度和算法會勸退很多人。

需要換一種思路，本質移動的線條元素和邊框并沒有關系，而是一個元素沿著邊框移動，線條和卡片內部的陰影就是一個元素，通過某種透視的方式產生了這種效果。

透視

通過透視的方式實現一個邊框效果，我們可以用2個盒子嵌套，父級設置1像素的padding，如下代碼簡單的實現一個邊框效果。

.outer {
  width: 400px;
  height: 200px;
  margin: 100px;
  background: rgb(54, 224, 202);
  padding: 1px;
  position: relative;
}

.inner {
  background: rgb(99, 99, 99);
  width: 100%;
  height: 100%;
}

效果圖：

然后增加一個子元素作為移動的元素，這個元素基于父級定位在邊框位置，由于動畫是沿著卡片內部四周移動，要確保在每一條邊上的透出的長度保持一致，所有創建的這個子元素是一個正方形。

.moving-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background: #fff;
    animation: moveAround 8s linear infinite;
}

并對這個元素增加簡單的animation動畫，沿著內邊框移動。

這個動畫需要注意的一個點是要使元素在移動的過程中保持勻速的動畫，需要計算每個關鍵幀之間的距離，并根據這些距離來調整每個關鍵幀的百分比。這樣可以確保元素在每個時間段內移動的距離與時間成正比，從而實現真正的勻速移動。

這里我們以上面的卡片舉例，其寬度為400px，高度為200px，元素沿矩形的邊框移動。

計算總路徑長度：總長度 = 2 (寬度 + 高度) = 2 (400px + 200px) = 1200px
計算每段所占的時間比例：水平邊所占比例 = 400px / 1200px = 1/3 ≈ 33.33%，垂直邊所占比例 = 200px / 1200px = 1/6 ≈ 16.67%

動畫代碼如下：

@keyframes moveAround {
    0%, 100% {
        top: 0px;
        left: 0px;
    }
    33.33% {
        top: 0px;
        left: calc(100% - 80px);
    }
    50% {
        top: calc(100% - 80px);
        left: calc(100% - 80px);
    }
    83.33% {
        top: calc(100% - 80px);
        left: 0px;
    }
}

最終完成的簡單版動畫效果如下：

這里為了方便大家看增加了透明度展示內部移動的元素，若去掉透明度則只有邊框上的一根線。

邊框效果處理

仔細看上面的圖可以發現在邊框盡頭時的過渡效果不好，瞬間從一條邊切換到另一條邊。首先還原網站的效果，增加邊框圓角，然后將內部移動的元素通過圓角變成一個圓形，這時候還需要同步調整內部元素的定位和動畫移動時設置的定位，保證內部圓形的中心和邊框的一致。

增加圓角處理：

.outer {
  border-radius: 20px;
}

.inner {
  border-radius: 20px;
}

.moving-element {
  border-radius: 40px;
  /* 圓心和邊框一致 */
  transform: translate(-40px, -40px);
}

調整動畫過程中的定位：

@keyframes moveAround {
    0%, 100% {
        top: 0px;
        left: 0px;
    }
    33.33% {
        top: 0px;
        left: 100%;
    }
    50% {
        top: 100%;
        left: 100%;
    }
    83.33% {
        top: 100%;
        left: 0px;
    }
}

此時的動畫效果：

此時的邊框位置動畫已經很接近網站的效果，進一步觀察在圖中的效果可以發現在邊框角落的位置有一點卡頓的感覺，這是因為邊框位置我們設置了圓角，但是元素移動的軌跡是直角，導致視覺上停頓了一下。這里我們需要進一步優化animation。設置圓角后內部動畫元素移動的點應該從4個變成8個，且對應的位置需要和圓角的大小一一對應才能保障流暢的動畫效果。

如下所示黑色圓點是到四個頂點的動畫坐標，新的綠色圓點是基于圓角后的動畫移動坐標。

基于上面的動畫百分比算法計算出最新的比例及坐標代碼如下：

@keyframes moveAround {
  0% { left: 40px; top: 0px; }
  28.93% { left: 360px; top: 0px; } 
  33.99% { left: 400px; top: 40px; } 
  44.82% { left: 400px; top: 160px; }
  49.88% { left: 360px; top: 200px; } 
  78.81% { left: 40px; top: 200px; }
  83.87% { left: 0px; top: 160px; } 
  94.70% { left: 0px; top: 40px; } 
  100% { left: 40px; top: 0px; } 
}

這里的動畫需要注意的是圓角部分綠色按鈕之間的動畫距離需要使用使用勾股定理計算。比如右上角的兩個點之間的計算方式是：

從 (360, 0) 到 (400, 40) = √((400-360)2 + (40-0)2) = √(1600 + 1600) = √3200 ≈ 56.57px

此時的動畫效果：

模糊陰影

現在就差最后的陰影部分還未實現，仔細觀察移動的線條并不是全實心純色，而是有漸變的效果，目前移動的元素是一個正方形，設置背景色為徑向漸變即可，修改背景色的代碼如下：

background-image: radial-gradient(#fff 40%,transparent 80%);

現在還需要將內部的漸變進一步模糊，注意這里僅僅是模糊元素背后的背景，不能影響卡片上面其他的元素內容展示。這里我們使用backdrop-filter設置blur模糊效果。

CSS屬性 backdrop-filter 用于在元素后面的區域上應用圖形效果（如模糊或顏色偏移）。這個屬性可以讓你對元素背后的背景進行處理，而不影響元素本身的前景內容。

最后進一步調整顏色還原網站的效果如下：

這個效果不僅可以做卡片展示，作為按鈕的背景效果也很不錯：

最后

到此整體的代碼實現過程就結束了，完整還原的網站的動畫效果。這是一個對用戶體驗很不錯的卡片效果，原網站實現的部分細節不一樣，整體實現原理差不多，基于兩個元素的1像素間距透出移動的線條，配合使用backdrop-filter設置純背景模糊效果，有興趣的可以嘗試看看。

作者:南城

來源-微信公眾號:南城大前端

出處:https://mp.weixin.qq.com/s/g-_3iD97PxmGL7RGwRrSvg

置邊框最常使用border，比如這樣：

border: 1px dashed #333;

這是最常規的方法了，今天再來說說其他兩種方法，

outline方式
background方式

outline方法

這也算是一種比較常規的方法了，

outline: 1px solid;

但需要注意的是，outline是在容器的最外部，與border的渲染還是有點區別的，同時對比下：

border: 1px dashed #333;
outline: 1px solid;

外部實線是outline，內部虛線是border，為了一致，可以設置outline-offset往內縮一點：

outline-offset: -1px;

background方法

這是本文的重點，我也是剛get到此項技能，之前一直不知道background居然如此強大，直接上代碼：

background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px, #ffffff;

這里我們只設置了上面看，而且還是虛線的，做一說明這種方式的強大，再把其他邊框補上去：

background: 
		linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px,
    linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 100%/9px 1px,
    linear-gradient(0deg, #333 50%, transparent 0) repeat-y 0 0/1px 9px,
    linear-gradient(0deg, #333 50%, transparent 0) repeat-y 100% 0px/1px 9px,
    #ffffff;

可見，使用background非常的靈活，邊框的位置可以任意調整。

現在我們已經掌握這幾方式，但本文的重點是上面這種，我們現在來動手操練下：

漸變邊框

background: linear-gradient(90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 0/100% 5px
    ,
    linear-gradient(-90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 100%/100% 4px,
    linear-gradient(180deg, #29bdd9 0%, #276ace 100%) repeat-y 0 0/4px 100%,
    linear-gradient(0deg, #29bdd9 0%, #276ace 100%) repeat-y 100% 0/4px 100%,
    #eee;

滾動虛線邊框

.box {
  background:
     linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
     linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
     linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
     linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
     background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
     background-position: 0 0, 0 100%, 0 0, 100% 0;
}

.box:hover {
  animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

滾動漸變

.box {
  background:
     linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
     linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
     linear-gradient(0deg, #FF8235,#30E8BF, #FF8235)  repeat-y,
     linear-gradient(0deg, #FF8235,#30E8BF, #FF8235)  repeat-y;
     background-size: 100% 8px, 100% 8px, 8px 100%, 8px 100%;
     background-position: 0 0, 0 100%, 0 0, 100% 0;
}

.box:hover {
  animation: linearGradientMove 1s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 200px 0, -200px 100%, 0 -200px, 100% 100px;
    }
}

以上就是設置邊框的幾個小技巧。

參考：
https://www.cnblogs.com/coco1s/p/14291567.html

模型是CSS布局的基礎，理解它的每個組成部分對于創建整潔、響應式的網頁至關重要。本文將深入探討盒模型的四個主要組成部分：邊距（Margin）、邊框（Border）、填充（Padding）和內容（Content），并解釋它們如何共同工作來創建網頁布局。

盒模型概述

在CSS中，盒模型是一種用于設計和布局的概念模型，它將HTML元素視為一個盒子。這個盒子包括了元素的內容、內邊距、邊框和外邊距。理解盒模型對于控制元素的大小和在頁面上的位置至關重要。

盒模型的結構

+-------------------------------+
|           Margin              |
|  +-------------------------+  |
|  |        Border           |  |
|  |  +-------------------+  |  |
|  |  |     Padding       |  |  |
|  |  |  +-------------+  |  |  |
|  |  |  |   Content   |  |  |  |
|  |  |  +-------------+  |  |  |
|  |  +-------------------+  |  |
|  +-------------------------+  |
+-------------------------------+

每個盒子從里到外包括：

內容（Content）：這是盒子中的實際內容，包括文本、圖片或其他媒體。
內邊距（Padding）：內容區域周圍的空間，內邊距是透明的。
邊框（Border）：圍繞內邊距和內容的線框，可以設置大小、樣式和顏色。
外邊距（Margin）：盒子外圍的空間，用來隔開相鄰的盒子。

邊距（Margin）

邊距是盒子外部的空間，它決定了元素之間的間隔。邊距是透明的，不可見，不會被背景顏色或背景圖片覆蓋。

/* 單邊邊距設置 */
.element {
  margin-top: 10px;    /* 上邊距 */
  margin-right: 15px;  /* 右邊距 */
  margin-bottom: 10px; /* 下邊距 */
  margin-left: 15px;   /* 左邊距 */
}

/* 簡寫形式 */
.element {
  margin: 10px 15px;   /* 上下邊距 | 左右邊距 */
}

邊距可以用來創建元素之間的空間，或者將元素與頁面邊緣分開。當兩個元素的垂直邊距相遇時，它們會合并成一個邊距，這個現象稱為邊距折疊。

邊框（Border）

邊框是盒子的一個可視化組件，圍繞著內邊距和內容。邊框的樣式、寬度和顏色都可以自定義。

.element {
  border-style: solid; /* 邊框樣式 */
  border-width: 2px;  /* 邊框寬度 */
  border-color: black; /* 邊框顏色 */
}

/* 簡寫形式 */
.element {
  border: 2px solid black;
}

邊框對于突出顯示元素或分隔內容非常有用。你還可以只為邊框的一邊或幾邊設置樣式。

填充（Padding）

填充是圍繞內容內部的空間，它可以增加內容和邊框之間的距離。與邊距不同，填充區域會被背景顏色或背景圖片覆蓋。

.element {
  padding-top: 5px;    /* 上填充 */
  padding-right: 10px;  /* 右填充 */
  padding-bottom: 5px; /* 下填充 */
  padding-left: 10px;   /* 左填充 */
}

/* 簡寫形式 */
.element {
  padding: 5px 10px;   /* 上下填充 | 左右填充 */
}

填充對于控制元素內部的空白區域非常有用，它可以幫助改善內容的可讀性。

內容（Content）

內容是盒子中的文字、圖片或其他媒體。內容的大小可以通過設置width和height屬性來控制，但實際可見區域的大小還會受到內邊距和邊框的影響。

.element {
  width: 200px;
  height: 150px;
}

內容區域是設計和布局的核心，所有的文本和媒體都在這里顯示。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin, Border, Padding Example</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
  }

  .container {
    max-width: 800px;
    margin: auto;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .header {
    background-color: #007bff;
    color: white;
    padding: 20px;
    text-align: center;
  }

  .content {
    padding: 20px;
    border: 1px solid #ddd;
    margin: 20px;
  }

  .box {
    background-color: #007bff;
    color: white;
    padding: 10px;
    margin: 10px;
    border: 3px solid #0056b3;
    text-align: center;
  }

  .footer {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="container">
  <div class="header">
    <h1>Welcome to My Page</h1>
  </div>

  <div class="content">
    <h2>Understanding CSS Box Model</h2>
    <p>The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. This model allows us to create space between elements and style them effectively.</p>
    
    <div class="box">Content Box</div>
  </div>

  <div class="footer">
    Footer Content
  </div>
</div>

</body>
</html>

總結

理解盒模型是前端開發的基礎，它允許我們精確控制元素的布局和間距。通過恰當地使用邊距、邊框、填充和內容，我們可以創建出既美觀又功能強大的網頁設計。隨著響應式設計的興起，現代CSS框架已經將盒模型的概念整合進其核心，使得跨設備布局變得更加一致和簡單。

在日常開發中，經常使用開發者工具來檢查和調試盒模型的各個部分，確保我們的樣式表現按照預期工作。掌握盒模型，你將能夠更加自信地處理網頁布局的挑戰。

在線咨詢

上一篇：PHP基礎知識講座：第2課，如何在HTML頁面中嵌入PHP代碼
下一篇：寫個網頁更簡單了！讓AI根據手繪原型生成HTML - 教程+代碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商