css边框流动效果

“好看的皮囊千篇一律，有趣的css百里挑一”。分享一个今天刷到的css制作动画的demo。

• 其中使用到了伪元素，关于伪元素的使用方法，我在常用的css选择器中有讲到
• inset：用作定位元素的 top、right、bottom、left 这些属性的简写。案例中使用的ins：5pxp;相当于top: 5px; right: 5px; bottom: 5px; left: 5px;值得注意的是inset 属性只作用于定位元素

上代码：

html部分只需要定义一个盒子

css部分：

 * {
      margin: 0;
      padding: 0;
    }
    .box {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 180px;
      height: 250px;
      border-radius: 20px;
      margin: 100px auto;
      background-color: #000;
      overflow: hidden;
    }
    .box::before {
      content: '';
      position: absolute;
      width: 120px;
      height: 120%;
      background: linear-gradient(#03fcc6, #ff0296);
      animation: rotates 4s linear infinite;
    }
    .box::after {
      content: '';
      position: absolute;
      border-radius: 20px;
      inset: 5px;
      background-color: #0e1538;
    }
    @keyframes rotates {
      to {
        transform: rotate(360deg);
      }
    }

演示效果：

 今日寄语：且听且行且随风，且行且看且从容！