2024.5.27

所学时间：2小时

代码行数：71行

博客园数：1篇

所学知识：今天将我们几个人的工作再次进行了整合，我设置了一个比较炫酷的按钮来进入他们的游戏，这样也能更好的吸引孩子们。按钮样式如下，当鼠标放在按钮上时，其上的八角阵会进行旋转，而当用户点击按钮后，会跳转到我的另外两名队员的游戏内。

相关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);
      }
    }