纯CSS丝滑边框线条动画（附源码）

效果

仅使用CSS实现一种丝滑的边框线条动画效果。关键的实现思路包括：

• 透视效果：通过设置包含两个嵌套元素，父元素有1像素的padding，从而创建出边框效果。

• 动画制作：创建一个绝对定位的子元素，使用animation属性让其沿着父元素的边框匀速移动。

• 匀速动画：通过计算元素移动的路径和距离，调整关键帧百分比，确保动画匀速。

• 圆角处理：为父元素和子元素添加圆角，并对动画元素进行位置调整，以适应圆角。

• 动画优化：在圆角处调整动画轨迹，确保过渡自然流畅。

• 模糊阴影：通过设置子元素的背景径向渐变和使用backdrop-filter属性添加模糊效果，实现阴影效果。

  
  

源码

1. <!DOCTYPE html>
   
2. <html lang="en">
   
3. 
   
4. <head>
   
5.   <meta charset="UTF-8">
   
6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   
7.   <style>
   
8.     body {
   
9.       background: rgb(9, 9, 11);
   
10.     }
    
11. 
    
12.     .container {
    
13.       position: relative;
    
14.       width: 400px;
    
15.       height: 200px;
    
16.       margin: 50px;
    
17.       /* 确保有足够空间显示动画 */
    
18.       border-radius: 30px;
    
19.       overflow: hidden;
    
20.       padding: 1px;
    
21.     }
    
22. 
    
23.     .element {
    
24.       background: rgba(9, 9, 11, 0.38);
    
25.       border: 1px solid rgb(30, 41, 59);
    
26.       width: 100%;
    
27.       height: 100%;
    
28.       border-radius: 30px;
    
29.       -webkit-backdrop-filter: blur(24px);
    
30.       backdrop-filter: blur(24px);
    
31.       box-sizing: border-box;
    
32.     }
    
33. 
    
34.     .moving-element {
    
35.       position: absolute;
    
36.       top: 0;
    
37.       left: 40px;
    
38.       width: 80px;
    
39.       height: 80px;
    
40.       background-image: radial-gradient(#cbacf9 40%, transparent 80%);
    
41.       border-radius: 40px;
    
42.       animation: moveAround 8s linear infinite;
    
43.       transform: translate(-40px, -40px);
    
44.     }
    
45. 
    
46.     @keyframes moveAround {
    
47.       0% {
    
48.         left: 40px;
    
49.         top: 0px;
    
50.       }
    
51. 
    
52.       28.93% {
    
53.         left: 360px;
    
54.         top: 0px;
    
55.       }
    
56. 
    
57.       33.99% {
    
58.         left: 400px;
    
59.         top: 40px;
    
60.       }
    
61. 
    
62.       44.82% {
    
63.         left: 400px;
    
64.         top: 160px;
    
65.       }
    
66. 
    
67.       49.88% {
    
68.         left: 360px;
    
69.         top: 200px;
    
70.       }
    
71. 
    
72.       78.81% {
    
73.         left: 40px;
    
74.         top: 200px;
    
75.       }
    
76. 
    
77.       83.87% {
    
78.         left: 0px;
    
79.         top: 160px;
    
80.       }
    
81. 
    
82.       94.70% {
    
83.         left: 0px;
    
84.         top: 40px;
    
85.       }
    
86. 
    
87.       100% {
    
88.         left: 40px;
    
89.         top: 0px;
    
90.       }
    
91.     }
    
92.   </style>
    
93. </head>
    
94. 
    
95. <body>
    
96.   <div class="container">
    
97.     <div class="moving-element"></div>
    
98.     <div class="element"></div>
    
99.   </div>
    
100. </body>
     
101. 
     
102. </html>

复制代码