遇到的css动画

情景1：鼠标悬浮时，边框线从左上角绕一圈的动画效果

html：
        <div class="smallpicture">
          <div class="draw"></div>
          <div class="draw"></div>
          <div class="draw"></div>
        </div>
css：
      .smallpicture {
          width: 130px;
          height: 40px;
          display: flex;
          justify-content: space-between;
          margin-top: 14px;

          /* 鼠标滑过边框转一圈动画效果 */
          div {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            box-sizing: border-box;
            position: relative;
            vertical-align: middle;
          }
          .draw {
            transition: color 0.1s;
          }

          .draw::before,
          .draw::after {
            content: "";
            width: 0;
            height: 0;
            box-sizing: inherit;
            position: absolute;
            border: 1.5px solid transparent;
            border-radius: 6px;
          }
          .draw::before {
            top: 0;
            left: 0;
          }

          .draw::after {
            bottom: 0;
            right: 0;
          }

          .draw:hover::before,
          .draw:hover::after {
            width: 100%;
            height: 100%;
            border-radius: 6px;
          }

          .draw:hover::before {
            border-top-color: black;
            border-right-color: black;
            transition: width 0.1s ease-out, height 0.1s ease-out 0.1s;
            border-radius: 6px;
          }

          .draw:hover::after {
            border-bottom-color: black;
            border-left-color: black;
            border-radius: 6px;
           /* 注意时间差 */
            transition: border-color 0s ease-out 0.2s, width 0.1s ease-out 0.2s, height 0.1s ease-out 0.3s;
          }

          /* 鼠标滑过边框转一圈动画效果结束 */

          div:nth-child(1) {
            background: url("../assets/images/hui-tuite.png");
            background-repeat: no-repeat;
            background-size: 100%, 100%;
          }

          div:nth-child(2) {
            background: url("../assets/images/hui-discord\ \(1\).png");
            background-repeat: no-repeat;
            background-size: 100%, 100%;
          }

          div:nth-child(3) {
            background: url("../assets/images/hui-ins.png");
            background-repeat: no-repeat;
            background-size: 100%, 100%;
          }
          div:hover{
            cursor: pointer;
          }
        }

情景2：鼠标滑过一段文字时，出现文字底边色

html：
          <div class="introduce">
          //注意此处一定要是行内元素，才能使每行文字分开
            <span class="adopt">
              Adopt the MIT license, always keep an open mind, looking forward
              to all parties to build the open source ecosystem.
            </span>
           </div>
css:
          .adopt {
          font-size: 18px;
          font-weight: 400;
          color: #1b1b1b;
          background: linear-gradient(#ff8600 0 0) no-repeat;
          transition: .8s, background-position 0s;
          background-size: var(--p, 0%);
          line-height: 27px;
        }

        .adopt:hover {
          cursor: pointer;
          --p: 100%;
        }

情景3：随着鼠标的滚动：正方体随着y轴滚动---我是将他分成一个组件被调用了

html：
   <div class="box">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
css：
   .box {
    width: 8px;
    height: 80px;
    transition: all .8s;
    transform: rotatey(0deg) rotatez(0deg) scale3d(0.7, 0.7, 0.7);
    background-color: #ff8600;
    position: relative;
    transform-style: preserve-3d;
  }

  span {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    box-sizing: border-box;
  }

  .box span:nth-child(1) {
    /* 左 */
    background-color: #ff8600;
    transform-origin: left;
    transform: rotatey(-90deg) translatex(-4px);
  }

  .box span:nth-child(2) {
    /* //右 */

    background-color: #ff8600;
    transform-origin: right;
    transform: rotatey(90deg) translatex(4px);
  }

  .box span:nth-child(3) {
    /* //后 */
    background-color: #cc6000;
    transform: translatez(-4px);
  }

  .box span:nth-child(4) {
    /* //前 */
    background-color: #ff8600;
    transform: translatez(4px);
  }
 javascript:
 
     mounted() {
      window.onscroll = function move() {
        var targetTop = document.documentElement.scrollTop //获取鼠标的高度
        var box = document.querySelectorAll(".box"); 
  for(var i = 0; i < box.length;i++){ 
 box[i].style.transform = `rotatey(${targetTop}deg) rotatez(0deg) scale3d(0.7, 0.7, 0.7)`
        }
      }
    }