54.css-按钮边框旋转

之前看到的一个按钮的边框一直在旋转还挺好看的,现在用纯css来实现一下. 主要思路就是用一个伪元素大小溢出去,然后旋转起来,用overflow:hidden遮住外面的部分,用另一个白色的伪元素遮住里面的部分

准备按钮

• 给定宽高
• 溢出隐藏

    .btn {
      width: 80px;
      height: 30px;
      border-radius: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow:hiddenl
    }

准备一个旋转的伪元素

• 左上角放在按钮的中心,
• 放在层级的最底层
• 给一个旋转的颜色
• 添加旋转动画
• 大小要大一点,不然旋转的时候会断掉

    .btn::before {
      content: '';
      background: rgb(188, 27, 27);
      position: absolute;
      height: 200%;
      width: 200%;
      border-radius: 3px;
      animation: border-line 3s infinite linear;
      z-index: -2;
      transform-origin: 0 0;
      top: 50%;
      left: 50%;
    }
    
        @keyframes border-line {
      to {
        transform: rotate(1turn);
      }
    }

内部遮罩的伪元素

• 层级比旋转的高一级
• 大小就是100%减去旋转的宽度
• 颜色就是按钮的颜色

    .btn::after {
      content: '';
      background: #fff;
      height: calc(100% - 4px);
      width: calc(100% - 4px);
      position: absolute;
      z-index: -1;
    }