2024.6.3

今天又是一天周一，我分享一下之前哪个动态按钮的css代码，这个动态效果是按钮附近的八角阵会一直旋转，旋转时某一刻静态效果如下：

其css代码为：

.btnn {
      height: 100px;
      width: 250px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.8s ease;
      position: relative;
      border: 2px solid rgba(255,255,255,.5);
      margin: 100px 550px;
      box-shadow: rgba(50, 50, 93, 1) 0px 50px 100px -20px,
      rgba(0, 0, 0, 1) 0px 30px 60px -30px;
    }

    .btnn::before,
    .btnn::after {
      position: absolute;
      display: block;
      content: "";
      width: 100%;
      height: 100%;
    }
    .btn7 {
      border: none;
    }

    .btn7:before,
    .btn7:after {
      border: 2px solid #111;
      transition: all 100ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    }

    .btn7:hover:after {
      width: 105px;
      animation: anim7a 1.5s infinite linear;
    }

    .btn7:hover:before {
      width: 105px;
      animation: anim7b 1.5s infinite linear;
    }
    @keyframes anim7a {
      from {
        transform: rotate(0turn);
      }
      to {
        transform: rotate(1turn);
      }
    }

    @keyframes anim7b {
      from {
        transform: rotate(0.125turn);
      }
      to {
        transform: rotate(1.125turn);
      }
    }