前言

这次给大家带来一个线条环绕的效果，由纯CSS实现，实现起来也比较简单，话不多说，咱们直接进入主题。

效果预览

效果展示如下。

HTML部分

首先看到HTML部分。相关代码如下。

 
class="mainbox">
      class="line">
      class="line">
      class="line">
      class="line">
      
class="content">线条环绕
    

这里包含了HTML的结构。在HTML中，创建了一个类名为mainbox的盒子，内部包含了四个line元素和一个类名为 content 的盒子。line 元素是用来生成样式中定义的动态线条的。

CSS部分

上面是HTML部分，HTML部分只是完成了基本结构，紧接着我们看到CSS部分。相关代码如下。

      body {
        padding: 120px;
      }
      .mainbox {
        width: 320px;
        height: 320px;
        position: relative;
        /* 超出隐藏需要加上 */
        overflow: hidden;
      }
      .content {
        width: 320px;
        height: 320px;
        line-height: 320px;
        text-align: center;
        background-color: #cde;
      }

在body中，padding: 120px;为body元素设置了上、右、下、左各 120px 的内边距。

在.mainbox中，width: 320px;设置了容器的宽度为 320px。height: 320px;：设置了容器的高度为 320px。position: relative;为了支持内部元素的绝对定位，外部容器设置了相对定位。overflow: hidden;表示超出容器范围的内容将被隐藏。

在.content中，width: 320px;表示设置内容块的宽度为 320px。height: 320px;表示设置内容块的高度为 320px。line-height: 320px;设置行高为 320px，使文本在内容块中垂直居中。text-align: center;表示文本水平居中对齐。

     .line {
       /* 结合外层元素的相对定位 */
       position: absolute;
     }
     .line:nth-child(1) {
       top: 0;
       left: 0;
       width: 100%;
       height: 3px;
       /* 加上渐变效果，方可形成拖尾效果 */
       background: linear-gradient(90deg, transparent, orange);
       animation: animate1 8s linear infinite;
     }
     /* 分别控制其上下左右的定位距离，从而形成线条跟随效果 */
     @keyframes animate1 {
       0% {
         left: -100%;
       }
       50%,
       100% {
         left: 100%;
       }
     }
     .line:nth-child(2) {
       top: -100%;
       right: 0;
       width: 3px;
       height: 100%;
       background: linear-gradient(180deg, transparent, red);
       animation: animate2 8s linear infinite;
       /* 注意要加上延时触发动画效果，这样线条才会依次触发 */
       animation-delay: 2s;
     }
     @keyframes animate2 {
       0% {
         top: -100%;
       }
       50%,
       100% {
         top: 100%;
       }
     }
     .line:nth-child(3) {
       bottom: 0;
       right: 0;
       width: 100%;
       background: linear-gradient(270deg, transparent, green);
       animation: animate3 8s linear infinite;
       animation-delay: 4s;
     }
     @keyframes animate3 {
       0% {
         right: -100%;
         height: 3px;
       }
       50%,
       100% {
         height: 2px;
         right: 100%;
       }
     }
     .line:nth-child(4) {
       bottom: -100%;
       left: 0;
       width: 3px;
       height: 100%;
       background: linear-gradient(360deg, transparent, #3a86ff);
       animation: animate4 8s linear infinite;
       animation-delay: 6s;
     }
     @keyframes animate4 {
       0% {
         bottom: -100%;
       }
       50%,
       100% {
         bottom: 100%;
       }
     }

.line 是一个用于创建线条的类名，通过设置不同的 nth-child 选择器，实现了多个动态线条的效果。.line:nth-child(1)表示设置线条的初始位置在左上角。使用 linear-gradient可以创建了水平方向的渐变线条效果，并且将动画效果命名为 animate1，持续8秒，采用线性动画效果，并且无限循环。在 animate1 中，左侧的线条通过 left 属性进行左右移动，从而实现了横向移动效果。.line:nth-child(2)和.line:nth-child(4)分别控制着其他方向的线条效果，类似地设置了初始位置和方向，使用了不同的渐变颜色。

每一个线条的动画也是8秒，采用线性动画效果，并且通过 animation-delay 属性设置了不同的延迟触发时间，从而实现了依次触发的效果。

每一个 animate 动画中，利用 top、bottom、left、right 属性以及高度和宽度的变化实现了线条的移动和变细效果。

综上所述，这段CSS代码实现了具有渐变色和动态移动效果的线条动画，通过animation和keyframes属性实现了线条的无限循环移动和变化效果。

这里实际上创建了一个包含文字内容的盒子，四条线从不同方向逐渐绘制出包围文本的效果。整体动画为8秒循环，并在2秒、4秒和6秒时延迟触发

总结

以上就是整个效果的实现过程了，纯CSS实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~