vue项目中订单完成提交按钮动画

最新推荐文章于 2024-06-02 18:45:32 发布
最新推荐文章于 2024-06-02 18:45:32 发布
阅读量4.2k 收藏
点赞数
文章标签： vue.js 前端 css3 javascript
ZYing
本文链接：https://blog.csdn.net/sjajjajusja/article/details/134252559
版权
1. 动画1
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Order</title>
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;display=swap" /> -->
  <style>
    :root {
      --primary: #275EFE;
      --primary-light: #7699FF;
      --dark: #1C212E;
      --grey-dark: #3F4656;
      --grey: #6C7486;
      --grey-light: #CDD9ED;
      --white: #FFF;
      --green: #16BF78;
      --sand: #DCB773;
      --sand-light: #EDD9A9;
    }

    .order {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: 0;
      background: var(--dark);
      position: relative;
      height: 63px;
      width: 240px;
      padding: 0;
      outline: none;
      cursor: pointer;
      border-radius: 32px;
      -webkit-mask-image: -webkit-radial-gradient(white, black);
      -webkit-tap-highlight-color: transparent;
      overflow: hidden;
      transition: transform 0.3s ease;
    }

    .order span {
      --o: 1;
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
      top: 19px;
      line-height: 24px;
      color: var(--white);
      font-size: 16px;
      font-weight: 500;
      opacity: var(--o);
      transition: opacity 0.3s ease;
    }

    .order span.default {
      transition-delay: 0.3s;
    }

    .order span.success {
      --offset: 16px;
      --o: 0;
    }

    .order span.success svg {
      width: 12px;
      height: 10px;
      display: inline-block;
      vertical-align: top;
      fill: none;
      margin: 7px 0 0 4px;
      stroke: var(--green);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 16px;
      stroke-dashoffset: var(--offset);
      transition: stroke-dashoffset 0.3s ease;
    }

    .order:active {
      transform: scale(0.96);
    }

    .order .lines {
      opacity: 0;
      position: absolute;
      height: 3px;
      background: var(--white);
      border-radius: 2px;
      width: 6px;
      top: 30px;
      left: 100%;
      box-shadow: 15px 0 0 var(--white), 30px 0 0 var(--white), 45px 0 0 var(--white), 60px 0 0 var(--white), 75px 0 0 var(--white), 90px 0 0 var(--white), 105px 0 0 var(--white), 120px 0 0 var(--white), 135px 0 0 var(--white), 150px 0 0 var(--white), 165px 0 0 var(--white), 180px 0 0 var(--white), 195px 0 0 var(--white), 210px 0 0 var(--white), 225px 0 0 var(--white), 240px 0 0 var(--white), 255px 0 0 var(--white), 270px 0 0 var(--white), 285px 0 0 var(--white), 300px 0 0 var(--white), 315px 0 0 var(--white), 330px 0 0 var(--white);
    }

    .order .back,
    .order .box {
      --start: var(--white);
      --stop: var(--grey-light);
      border-radius: 2px;
      background: linear-gradient(var(--start), var(--stop));
      position: absolute;
    }

    .order .truck {
      width: 60px;
      height: 41px;
      left: 100%;
      z-index: 1;
      top: 11px;
      position: absolute;
      transform: translateX(24px);
    }

    .order .truck:before,
    .order .truck:after {
      --r: -90deg;
      content: "";
      height: 2px;
      width: 20px;
      right: 58px;
      position: absolute;
      display: block;
      background: var(--white);
      border-radius: 1px;
      transform-origin: 100% 50%;
      transform: rotate(var(--r));
    }

    .order .truck:before {
      top: 4px;
    }

    .order .truck:after {
      --r: 90deg;
      bottom: 4px;
    }

    .order .truck .back {
      left: 0;
      top: 0;
      width: 60px;
      height: 41px;
      z-index: 1;
    }

    .order .truck .front {
      overflow: hidden;
      position: absolute;
      border-radius: 2px 9px 9px 2px;
      width: 26px;
      height: 41px;
      left: 60px;
    }

    .order .truck .front:before,
    .order .truck .front:after {
      content: "";
      position: absolute;
      display: block;
    }

    .order .truck .front:before {
      height: 13px;
      width: 2px;
      left: 0;
      top: 14px;
      background: linear-gradient(var(--grey), var(--grey-dark));
    }

    .order .truck .front:after {
      border-radius: 2px 9px 9px 2px;
      background: var(--primary);
      width: 24px;
      height: 41px;
      right: 0;
    }

    .order .truck .front .window {
      overflow: hidden;
      border-radius: 2px 8px 8px 2px;
      background: var(--primary-light);
      transform: perspective(4px) rotateY(3deg);
      width: 22px;
      height: 41px;
      position: absolute;
      left: 2px;
      top: 0;
      z-index: 1;
      transform-origin: 0 50%;
    }

    .order .truck .front .window:before,
    .order .truck .front .window:after {
      content: "";
      position: absolute;
      right: 0;
    }

    .order .truck .front .window:before {
      top: 0;
      bottom: 0;
      width: 14px;
      background: var(--dark);
    }

    .order .truck .front .window:after {
      width: 14px;
      top: 7px;
      height: 4px;
      position: absolute;
      background: rgba(255, 255, 255, 0.14);
      transform: skewY(14deg);
      box-shadow: 0 7px 0 rgba(255, 255, 255, 0.14);
    }

    .order .truck .light {
      width: 3px;
      height: 8px;
      left: 83px;
      transform-origin: 100% 50%;
      position: absolute;
      border-radius: 2px;
      transform: scaleX(0.8);
      background: #f0dc5f;
    }

    .order .truck .light:before {
      content: "";
      height: 4px;
      width: 7px;
      opacity: 0;
      transform: perspective(2px) rotateY(-15deg) scaleX(0.94);
      position: absolute;
      transform-origin: 0 50%;
      left: 3px;
      top: 50%;
      margin-top: -2px;
      background: linear-gradient(90deg, #f0dc5f, rgba(240, 220, 95, 0.7), rgba(240, 220, 95, 0));
    }

    .order .truck .light.top {
      top: 4px;
    }

    .order .truck .light.bottom {
      bottom: 4px;
    }

    .order .box {
      --start: var(--sand-light);
      --stop: var(--sand);
      width: 21px;
      height: 21px;
      right: 100%;
      top: 21px;
    }

    .order .box:before,
    .order .box:after {
      content: "";
      top: 10px;
      position: absolute;
      left: 0;
      right: 0;
    }

    .order .box:before {
      height: 3px;
      margin-top: -1px;
      background: rgba(0, 0, 0, 0.1);
    }

    .order .box:after {
      height: 1px;
      background: rgba(0, 0, 0, 0.15);
    }

    .order.animate .default {
      --o: 0;
      transition-delay: 0s;
    }

    .order.animate .success {
      --offset: 0;
      --o: 1;
      transition-delay: 7s;
    }

    .order.animate .success svg {
      transition-delay: 7.3s;
    }

    .order.animate .truck {
      -webkit-animation: truck 10s ease forwards;
      animation: truck 10s ease forwards;
    }

    .order.animate .truck:before {
      -webkit-animation: door1 2.4s ease forwards 0.3s;
      animation: door1 2.4s ease forwards 0.3s;
    }

    .order.animate .truck:after {
      -webkit-animation: door2 2.4s ease forwards 0.6s;
      animation: door2 2.4s ease forwards 0.6s;
    }

    .order.animate .truck .light:before,
    .order.animate .truck .light:after {
      -webkit-animation: light 10s ease forwards;
      animation: light 10s ease forwards;
    }

    .order.animate .box {
      -webkit-animation: box 10s ease forwards;
      animation: box 10s ease forwards;
    }

    .order.animate .lines {
      -webkit-animation: lines 10s ease forwards;
      animation: lines 10s ease forwards;
    }

    @-webkit-keyframes truck {

      10%,
      30% {
        transform: translateX(-164px);
      }

      40% {
        transform: translateX(-104px);
      }

      60% {
        transform: translateX(-224px);
      }

      75%,
      100% {
        transform: translateX(24px);
      }
    }

    @keyframes truck {

      10%,
      30% {
        transform: translateX(-164px);
      }

      40% {
        transform: translateX(-104px);
      }

      60% {
        transform: translateX(-224px);
      }

      75%,
      100% {
        transform: translateX(24px);
      }
    }

    @-webkit-keyframes lines {

      0%,
      30% {
        opacity: 0;
        transform: scaleY(0.7) translateX(0);
      }

      35%,
      65% {
        opacity: 1;
      }

      70% {
        opacity: 0;
      }

      100% {
        transform: scaleY(0.7) translateX(-400px);
      }
    }

    @keyframes lines {

      0%,
      30% {
        opacity: 0;
        transform: scaleY(0.7) translateX(0);
      }

      35%,
      65% {
        opacity: 1;
      }

      70% {
        opacity: 0;
      }

      100% {
        transform: scaleY(0.7) translateX(-400px);
      }
    }

    @-webkit-keyframes light {

      0%,
      30% {
        opacity: 0;
        transform: perspective(2px) rotateY(-15deg) scaleX(0.88);
      }

      40%,
      100% {
        opacity: 1;
        transform: perspective(2px) rotateY(-15deg) scaleX(0.94);
      }
    }

    @keyframes light {

      0%,
      30% {
        opacity: 0;
        transform: perspective(2px) rotateY(-15deg) scaleX(0.88);
      }

      40%,
      100% {
        opacity: 1;
        transform: perspective(2px) rotateY(-15deg) scaleX(0.94);
      }
    }

    @-webkit-keyframes door1 {

      30%,
      50% {
        transform: rotate(32deg);
      }
    }

    @keyframes door1 {

      30%,
      50% {
        transform: rotate(32deg);
      }
    }

    @-webkit-keyframes door2 {

      30%,
      50% {
        transform: rotate(-32deg);
      }
    }

    @keyframes door2 {

      30%,
      50% {
        transform: rotate(-32deg);
      }
    }

    @-webkit-keyframes box {

      8%,
      10% {
        transform: translateX(40px);
        opacity: 1;
      }

      25% {
        transform: translateX(112px);
        opacity: 1;
      }

      26% {
        transform: translateX(112px);
        opacity: 0;
      }

      27%,
      100% {
        transform: translateX(0px);
        opacity: 0;
      }
    }

    @keyframes box {

      8%,
      10% {
        transform: translateX(40px);
        opacity: 1;
      }

      25% {
        transform: translateX(112px);
        opacity: 1;
      }

      26% {
        transform: translateX(112px);
        opacity: 0;
      }

      27%,
      100% {
        transform: translateX(0px);
        opacity: 0;
      }
    }

    html {
      box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
    }

    * {
      box-sizing: inherit;
    }

    *:before,
    *:after {
      box-sizing: inherit;
    }

    body {
      min-height: 100vh;
      font-family: Roboto, Arial;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #E4ECFA;
    }

    body .dribbble {
      position: fixed;
      display: block;
      right: 20px;
      bottom: 20px;
    }

    body .dribbble img {
      display: block;
      height: 28px;
    }
  </style>
</head>

<body>
  <!-- partial:index.partial.html -->
  <button class="order">
    <span class="default">确认订单</span><span class="success">订单已发送
      <svg viewbox="0 0 12 10">
        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
      </svg></span>
    <div class="box"></div>
    <div class="truck">
      <div class="back"></div>
      <div class="front">
        <div class="window"></div>
      </div>
      <div class="light top"></div>
      <div class="light bottom"></div>
    </div>
    <div class="lines"></div>
  </button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $('.order').click(function (e) {
      let button = $(this);
      if (!button.hasClass('animate')) {
        button.addClass('animate');
        setTimeout(() => {
          button.removeClass('animate');
        }, 10000);
      }

    });
  </script>
</body>
</html>

在这里插入图片描述

动画2
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .truck-button {
      --color: #fff;
      --background: #2B3044;
      --tick: #16BF78;
      --base: #0D0F18;
      --wheel: #2B3044;
      --wheel-inner: #646B8C;
      --wheel-dot: #fff;
      --back: #6D58FF;
      --back-inner: #362A89;
      --back-inner-shadow: #2D246B;
      --front: #A6ACCD;
      --front-shadow: #535A79;
      --front-light: #FFF8B1;
      --window: #2B3044;
      --window-shadow: #404660;
      --street: #646B8C;
      --street-fill: #404660;
      --box: #DCB97A;
      --box-shadow: #B89B66;
      padding: 12px 0;
      width: 172px;
      cursor: pointer;
      text-align: center;
      position: relative;
      border: none;
      outline: none;
      color: var(--color);
      background: var(--background);
      border-radius: var(--br, 5px);
      -webkit-appearance: none;
      -webkit-tap-highlight-color: transparent;
      transform-style: preserve-3d;
      transform: rotateX(var(--rx, 0deg)) translateZ(0);
      transition: transform 0.5s, border-radius 0.3s linear var(--br-d, 0s);
    }

    .truck-button:before,
    .truck-button:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 6px;
      display: block;
      background: var(--b, var(--street));
      transform-origin: 0 100%;
      transform: rotateX(90deg) scaleX(var(--sy, 1));
    }

    .truck-button:after {
      --sy: var(--progress, 0);
      --b: var(--street-fill);
    }

    .truck-button .default,
    .truck-button .success {
      display: block;
      font-weight: 500;
      font-size: 14px;
      line-height: 24px;
      opacity: var(--o, 1);
      transition: opacity 0.3s;
    }

    .truck-button .success {
      --o: 0;
      position: absolute;
      top: 12px;
      left: 0;
      right: 0;
    }

    .truck-button .success svg {
      width: 12px;
      height: 10px;
      display: inline-block;
      vertical-align: top;
      fill: none;
      margin: 7px 0 0 4px;
      stroke: var(--tick);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 16px;
      stroke-dashoffset: var(--offset, 16px);
      transition: stroke-dashoffset 0.4s ease 0.45s;
    }

    .truck-button .truck {
      position: absolute;
      width: 72px;
      height: 28px;
      transform: rotateX(90deg) translate3d(var(--truck-x, 4px), calc(var(--truck-y-n, -26) * 1px), 12px);
    }

    .truck-button .truck:before,
    .truck-button .truck:after {
      content: "";
      position: absolute;
      bottom: -6px;
      left: var(--l, 18px);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      z-index: 2;
      box-shadow: inset 0 0 0 2px var(--wheel), inset 0 0 0 4px var(--wheel-inner);
      background: var(--wheel-dot);
      transform: translateY(calc(var(--truck-y) * -1px)) translateZ(0);
    }

    .truck-button .truck:after {
      --l: 54px;
    }

    .truck-button .truck .wheel,
    .truck-button .truck .wheel:before {
      position: absolute;
      bottom: var(--b, -6px);
      left: var(--l, 6px);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--wheel);
      transform: translateZ(0);
    }

    .truck-button .truck .wheel {
      transform: translateY(calc(var(--truck-y) * -1px)) translateZ(0);
    }

    .truck-button .truck .wheel:before {
      --l: 35px;
      --b: 0;
      content: "";
    }

    .truck-button .truck .front,
    .truck-button .truck .back,
    .truck-button .truck .box {
      position: absolute;
    }

    .truck-button .truck .back {
      left: 0;
      bottom: 0;
      z-index: 1;
      width: 47px;
      height: 28px;
      border-radius: 1px 1px 0 0;
      background: linear-gradient(68deg, var(--back-inner) 0%, var(--back-inner) 22%, var(--back-inner-shadow) 22.1%, var(--back-inner-shadow) 100%);
    }

    .truck-button .truck .back:before,
    .truck-button .truck .back:after {
      content: "";
      position: absolute;
    }

    .truck-button .truck .back:before {
      left: 11px;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      border-radius: 0 1px 0 0;
      background: var(--back);
    }

    .truck-button .truck .back:after {
      border-radius: 1px;
      width: 73px;
      height: 2px;
      left: -1px;
      bottom: -2px;
      background: var(--base);
    }

    .truck-button .truck .front {
      left: 47px;
      bottom: -1px;
      height: 22px;
      width: 24px;
      -webkit-clip-path: polygon(55% 0, 72% 44%, 100% 58%, 100% 100%, 0 100%, 0 0);
      clip-path: polygon(55% 0, 72% 44%, 100% 58%, 100% 100%, 0 100%, 0 0);
      background: linear-gradient(84deg, var(--front-shadow) 0%, var(--front-shadow) 10%, var(--front) 12%, var(--front) 100%);
    }

    .truck-button .truck .front:before,
    .truck-button .truck .front:after {
      content: "";
      position: absolute;
    }

    .truck-button .truck .front:before {
      width: 7px;
      height: 8px;
      background: #fff;
      left: 7px;
      top: 2px;
      -webkit-clip-path: polygon(0 0, 60% 0%, 100% 100%, 0% 100%);
      clip-path: polygon(0 0, 60% 0%, 100% 100%, 0% 100%);
      background: linear-gradient(59deg, var(--window) 0%, var(--window) 57%, var(--window-shadow) 55%, var(--window-shadow) 100%);
    }

    .truck-button .truck .front:after {
      width: 3px;
      height: 2px;
      right: 0;
      bottom: 3px;
      background: var(--front-light);
    }

    .truck-button .truck .box {
      width: 13px;
      height: 13px;
      right: 56px;
      bottom: 0;
      z-index: 1;
      border-radius: 1px;
      overflow: hidden;
      transform: translate(calc(var(--box-x, -24) * 1px), calc(var(--box-y, -6) * 1px)) scale(var(--box-s, 0.5));
      opacity: var(--box-o, 0);
      background: linear-gradient(68deg, var(--box) 0%, var(--box) 50%, var(--box-shadow) 50.2%, var(--box-shadow) 100%);
      background-size: 250% 100%;
      background-position-x: calc(var(--bx, 0) * 1%);
    }

    .truck-button .truck .box:before,
    .truck-button .truck .box:after {
      content: "";
      position: absolute;
    }

    .truck-button .truck .box:before {
      content: "";
      background: rgba(255, 255, 255, 0.2);
      left: 0;
      right: 0;
      top: 6px;
      height: 1px;
    }

    .truck-button .truck .box:after {
      width: 6px;
      left: 100%;
      top: 0;
      bottom: 0;
      background: var(--back);
      transform: translateX(calc(var(--hx, 0) * 1px));
    }

    .truck-button.animation {
      --rx: -90deg;
      --br: 0;
    }

    .truck-button.animation .default {
      --o: 0;
    }

    .truck-button.animation.done {
      --rx: 0deg;
      --br: 5px;
      --br-d: .2s;
    }

    .truck-button.animation.done .success {
      --o: 1;
      --offset: 0;
    }

    html {
      box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
    }

    * {
      box-sizing: inherit;
    }

    *:before,
    *:after {
      box-sizing: inherit;
    }

    body {
      min-height: 100vh;
      display: flex;
      font-family: "Inter UI", "Inter", Arial;
      justify-content: center;
      align-items: center;
      background: #000;
    }

    body .dribbble {
      position: fixed;
      display: block;
      right: 20px;
      bottom: 20px;
    }

    body .dribbble img {
      display: block;
      height: 28px;
    }

    body .twitter {
      position: fixed;
      display: block;
      right: 64px;
      bottom: 14px;
    }

    body .twitter svg {
      width: 32px;
      height: 32px;
      fill: #1da1f2;
    }
  </style>
</head>

<body>
  <!-- partial:index.partial.html -->
  <button class="truck-button">
    <span class="default">提交订单</span>
    <span class="success">
      订单完成
      <svg viewbox="0 0 12 10">
        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
      </svg>
    </span>
    <div class="truck">
      <div class="wheel"></div>
      <div class="back"></div>
      <div class="front"></div>
      <div class="box"></div>
    </div>
  </button>
  <script src='https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js'></script>
  <script>
    document.querySelectorAll('.truck-button').forEach(button => {
      button.addEventListener('click', e => {
        e.preventDefault();
        let box = button.querySelector('.box'),
          truck = button.querySelector('.truck');

        if (!button.classList.contains('done')) {

          if (!button.classList.contains('animation')) {

            button.classList.add('animation');

            gsap.to(button, {
              '--box-s': 1,
              '--box-o': 1,
              duration: .3,
              delay: .5
            });

            gsap.to(box, {
              x: 0,
              duration: .4,
              delay: .7
            });

            gsap.to(button, {
              '--hx': -5,
              '--bx': 50,
              duration: .18,
              delay: .92
            });

            gsap.to(box, {
              y: 0,
              duration: .1,
              delay: 1.15
            });

            gsap.set(button, {
              '--truck-y': 0,
              '--truck-y-n': -26
            });

            gsap.to(button, {
              '--truck-y': 1,
              '--truck-y-n': -25,
              duration: .2,
              delay: 1.25,
              onComplete() {
                gsap.timeline({
                  onComplete() {
                    button.classList.add('done');
                  }
                }).to(truck, {
                  x: 0,
                  duration: .4
                }).to(truck, {
                  x: 40,
                  duration: 1
                }).to(truck, {
                  x: 20,
                  duration: .6
                }).to(truck, {
                  x: 96,
                  duration: .4
                });
                gsap.to(button, {
                  '--progress': 1,
                  duration: 2.4,
                  ease: "power2.in"
                });
              }
            });

          }

        } else {
          button.classList.remove('animation', 'done');
          gsap.set(truck, {
            x: 4
          });
          gsap.set(button, {
            '--progress': 0,
            '--hx': 0,
            '--bx': 0,
            '--box-s': .5,
            '--box-o': 0,
            '--truck-y': 0,
            '--truck-y-n': -26
          });
          gsap.set(box, {
            x: -24,
            y: -6
          });
        }

      });
    });
  </script>

</body>

</html>

在这里插入图片描述

动画3
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      font-family: "Montserrat", sans-serif;
    }

    body {
      width: 100vw;
      height: 100vh;
      background-color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .place-order {
      width: 160px;
      height: 50px;
      border-radius: 10px;
      background-color: #2b59b5;
      position: relative;
      overflow: hidden;
      border: none;
      cursor: pointer;
    }

    .place-order .text {
      width: 100%;
      height: 100%;
      line-height: 50px;
      opacity: 0;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
      position: absolute;
      top: 0;
      transition: all 0.2s;
      transform: translateY(20px);
    }

    .place-order:focus {
      outline: none;
    }

    .place-order .forklift {
      display: none;
      transform: scale(0.4);
      position: absolute;
      top: -2px;
      left: -65px;
      animation: 4s lift-moving infinite;
    }

    .place-order .forklift .upper {
      width: 34px;
      height: 20px;
      margin-bottom: 2px;
      border: 5px solid #ff7745;
      position: relative;
      border-radius: 10px 50px 10px 5px;
    }

    .place-order .forklift .upper:after {
      content: "";
      width: 30px;
      height: 50px;
      position: absolute;
      left: 170%;
      top: 12px;
      box-sizing: border-box;
      border-left: 5px solid #000;
      border-bottom: 6px solid #000;
      border-radius: 0 0 0 5px;
      transform-origin: center;
    }

    .place-order .forklift .lower {
      width: 60px;
      height: 30px;
      position: relative;
      background-color: #FF4500;
      border-radius: 5px 15px 10px 10px;
    }

    .place-order .forklift .lower:before,
    .place-order .forklift .lower:after {
      content: "";
      width: 20px;
      height: 20px;
      position: absolute;
      left: 0;
      bottom: -10px;
      border: 3px solid #2b59b5;
      border-radius: 50%;
      background-color: #000;
    }

    .place-order .forklift .lower:after {
      left: 36px;
    }

    .place-order .box {
      display: none;
      width: 50px;
      height: 50px;
      background-color: #ad8762;
      border-radius: 5px;
      position: absolute;
      top: 56px;
      left: 50px;
      transform: scale(0.4);
      animation: 4s box infinite;
    }

    .place-order .box:before,
    .place-order .box:after {
      content: "";
      width: 4px;
      height: 12px;
      left: 21px;
      background-color: #ffbf59;
      position: absolute;
    }

    .place-order .box:after {
      height: 10px;
      left: 25px;
    }

    .place-order--default .default {
      opacity: 1;
      transform: translateY(0);
    }

    .place-order--default .done {
      transform: translateY(20px);
    }

    .place-order--placing .forklift {
      display: block;
    }

    .place-order--placing .box {
      display: block;
    }

    .place-order--placing .default {
      transform: translateY(-20px);
    }

    .place-order--done .done {
      opacity: 1;
      transform: translateY(0);
    }

    .place-order--done .default {
      transform: translateY(-20px);
    }

    @keyframes lift-moving {
      0% {
        left: -65px;
      }

      50% {
        left: 20px;
      }

      60% {
        left: 15px;
      }

      100% {
        left: 200px;
      }
    }

    @keyframes box {
      0% {
        top: 56px;
      }

      20% {
        top: 6px;
        left: 50px;
      }

      50% {
        top: 6px;
        left: 50px;
      }

      60% {
        top: 6px;
        left: 45px;
      }

      100% {
        top: 6px;
        left: 230px;
      }
    }
  </style>
</head>

<body>
  <!-- partial:index.partial.html -->
  <button class="place-order place-order--default">
    <div class="default text">提交订单</div>
    <div class="forklift">
      <div class="upper"></div>
      <div class="lower"></div>
    </div>
    <div class="box animation"></div>
    <div class="done text">订单完成</div>
  </button>
  <!-- partial -->
  <script>
    const btn = document.querySelector(".place-order");
    btn.addEventListener("click", () => {
      btn.classList.remove("place-order--default");
      btn.classList.add("place-order--placing");
      setTimeout(() => {
        btn.classList.remove("place-order--placing");
        btn.classList.add("place-order--done");
      }, 4000);
      setTimeout(() => {
        btn.classList.remove("place-order--done");
        btn.classList.add("place-order--default");
      }, 6000);
    })
  </script>

</body>

</html>

在这里插入图片描述

Zeng　
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
支付成功 对勾动画
12-16
基于Bezier绘制的类似支付宝支付成功的动画，有这个需求的朋友们可以参考或者提出宝贵意见。
vue项目中应用ueditor自定义上传按钮功能
08-27
主要介绍了vue项目中应用ueditor自定义上传按钮功能，文中以vue-cli生成的项目为例给大家介绍了vue项目中使用ueditor的方法，感兴趣的朋友跟随脚本之家小编一起学习吧
vue实现滑动切换：切换选项时滑块有滑动过渡的效果
weixin_45313351的博客
12-27 1079
封装的一个带有色块滑动的组件，切换选项时色块有滑动过渡的效果
Vue学习之动画效果篇
cug-jdc的博客
09-11 565
Vue系列文章目录 Vue学习之入门篇 Vue学习之模板语法和语句结构篇 Vue学习之事件处理器与属性篇 Vue学习之表单与组件篇 Vue学习之路由访问与混入对象篇 Vue学习之动画效果篇Vue系列文章目录一、过渡效果二、动画效果 一、过渡效果 过渡 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。语法格式如下： <transition name = "nameoftransition">
vue 按钮 点击添加动态效果、js按钮点击添加波浪效果
李程程的博客
05-17 1129
vue 按钮 点击添加动态效果、按钮点击添加波浪效果
Vue项目流程7，交易页面，提交订单，支付页面，利用element UI 以及 QRCode 完成微信支付，弹出框按钮的相关工作，个人中心以及子路由我的订单
qq_49080239的博客
09-02 2254
此时需要使用到定时器，当用户没有支付即服务器返回的是未支付成功，此时需要一直向服务器发送请求，直到支付完成或是取消支付。4、二维码生成之后需要知道成功或失败，如果支付成功就路由跳转如果支付失败弹出提示信息，所以此时需要向服务器发请求。React(Vue):antd[PC端]----antd-mobile[移动端]2、点击提交订单时，还需要向服务器发起一次请求并将支付的信息传递给服务器。Vue:ElementUI[PC端]----vant[移动端]（3）路由跳转时派发action，即交易页面挂载完毕。
解决vue 按钮多次点击重复提交数据问题
08-27
主要介绍了vue 按钮多次点击重复提交数据的问题,本文通过实例结合的形式给大家介绍的非常详细，需要的朋友可以参考下
vue3 项目购物车 + 动画效果
03-16
1、使用到动画特效，包括页面与页面，解释的非常详细 2、axiso\Vue3\animate\Vuex
vue项目中使用Svg的方法
10-17
本文主要以 vue-cli3 搭建的项目为例，来聊一下如何在项目中更优雅的使用 svg 。感兴趣的朋友跟随小编一起看看吧
vue项目中遇到的难点面试.pdf
12-14
vue项目中遇到的难点面试.pdf
vue项目答辩题目【第一弹】
m0_60676278的博客
05-11 2503
Animation和Translation都可以用来定义动画，但是它们的具体含义和使用方式略有不同。Animation通常指的是一系列连续的图像或对象，通过快速播放来创造出一种运动或变化的效果。在计算机图形学中，动画可以通过在一定时间内连续地显示一系列图像来实现。这些图像可以是手绘的，也可以是由计算机生成的。动画可以用于电影、电视节目、游戏等领域。Translation则是指将一个对象从一个位置移动到另一个位置的过程。
Vue实验报告4 Tab栏与按钮实现动态切换
m0_69194031的博客
11-03 1312
1.掌握内置过渡类名及自定义类名的使用 2.掌握JavaScript钩子创建动画 3.掌握单元素、多元素、多组件的过渡动画 4.掌握列表过渡的实现 5.掌握封装可复用过渡动画的方法
vue+react项目相关面试题【未完成】
m0_69892739的博客
05-27 522
animation和traslation都是可以做出动画效果的，但是transition主要是做一些简单的过渡效果，而animation可以做复杂的动画效果，在语法上有非常大的区别。animation是动画属性，它的实现是不需要触发事件的，设定好时间之后可以自己执行，且可以循环一个动画(设置多个关键帧)。translation是过渡属性，强调的是过渡，它的实现需要触发一个事件(比如鼠标移动上去，焦点，点击等)才执行动画，过渡只有一组关键帧。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 631
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择
IT13333的博客
05-28 369
【代码】elemnt ui 时间选择器。当前日期往前推6个月以前的的不可选择。
我成功创建了一个Electron应用程序
最新发布
lulei5153的博客
06-02 265
1.创建electron项目命令： yarn create @quick-start/electron electron-memo。2选择：√ Select a framework: » vue。3.命令：cd electron-memo。6.打包命令：yarn build:win。5.启动命令： yarn dev。7.修改 index.html。6.修改 App.vue。
【Vue】v-if / v-show条件渲染指令
qq_39921135的博客
05-29 517
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。表达式值为 true 显示， false 隐藏。作用： 控制元素显示隐藏（简单的显示隐藏）场景：频繁切换显示隐藏的场景。
vue-标签选择
zw899004的专栏
06-01 701
vue-标签选择
vue移动端项目提交订单
06-10
提交订单需要进行以下步骤： 1. 用户在移动端填写订单信息，包括商品名称、数量、价格、收货地址、联系方式等。 2. 用户点击提交订单按钮，前端会将订单信息通过 AJAX 请求发送到后端 API 接口。 3. 后端接收到...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值