前端之提交订单动画案例

最新推荐文章于 2024-07-25 09:24:40 发布

星染夜空

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量59

点赞数

文章标签：前端 javascript html5 css

本文链接：https://blog.csdn.net/hexuhui0920/article/details/134404863

版权

一、效果视频

前端提交订单动画

二、设计代码

（1） HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>星染夜空提交订单动画</title>
    <link rel="stylesheet" href="./style.css" />
  </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 src="./script.js"></script>
  </body>
</html>

（2）CSS

* {
  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;
  }
}

（3）Javascript

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