css 相关

背景色渐变

    /* background: linear-gradient(45deg, #122556 25%, transparent 25%, transparent 75%, #122556 75%), linear-gradient(-45deg, #122556 25%, transparent 25%, transparent 75%, #122556 75%); */
    background: linear-gradient(12deg, #122556 25%, transparent 25%, transparent 75%, #122556 75%);
    background: linear-gradient(4deg, #122556 49%, transparent 49%, transparent 50%, #122556 50%);
    background: linear-gradient(4deg, transparent 49%, #000 49%, #000 50%, transparent 50%);

https://blog.csdn.net/bule_sky78/article/details/120998039

边框动画

<style>
    body {
      background-color: antiquewhite;
    }

    .btn {
      display: inline-block;
      position: relative;
      background: 0;
      border: 0;
      color: #fff;
      font-size: 18px;
      cursor: pointer;
      margin: 20px 30px;
      background: rgba(0, 0, 0, 0.09);
    }

    .btn span {
      display: block;
      padding: 25px 80px;
    }
    button::before,
    button::after {
      content: "";
      width: 0;
      height: 2px;
      position: absolute;
      background: red;
    }

    .btn::before {
      left: 0;
      top: 0;
      transition: all .5s linear 0s;
    }
    button:hover::before {
      width: 100%;
      transition-delay: 0.5s;
    }

    .btn::after {
      left: 0;
      bottom: 0;
      transition: all .5s linear .5s;
    }
    button:hover::after {
      width: 100%;
      transition-delay: 0s;
    }


    span::before,
    span::after {
      content: "";
      width: 2px;
      height: 0;
      position: absolute;
      background: red;
    }
    span::before{
      bottom: 0;
      left: 0;
      transition: all .5s linear 0.5s;
    }
    button:hover span::before {
      height: 100%;
      transition-delay: 0s;
    }
    span::after{
      bottom: 0;
      right: 0;
      transition: all .5s linear 0s;
    }
    button:hover span::after {
      height: 100%;
      transition-delay: 0.5s;
    }
  </style>

  <button class="btn">
    <span>hover</span>
  </button>

https://imisu.blog.csdn.net/article/details/118105998
https://www.isqqw.com/#/homepage