GSAP增强型购物车按钮

下载代码

html

css

分享到微信朋友圈

html

<div class="container">
  <button class="checkout-btn">
    <span class="checkout-btn__icon material-icons-outlined">
      shopping_cart
    </span>
    <span class="checkout-btn__text">
      Checkout
    </span>
    <span class="checkout-btn__success">
      <span class="material-icons-outlined">
        done
      </span>
      Thank you for your order!
    </span>
    <span class="checkout-btn__failure">
      <span class="material-icons-outlined">
        error_outline
      </span>
      Order was unable to process.
    </span>
  </button>
</div>

css

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  background: #1F1F1F;
  font-family: "Inter", sans-serif;
}
@media (min-width: 640px) {
  body {
    flex-flow: row;
  }
}

* {
  box-sizing: border-box;
}

.container {
  flex: 1;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-btn {
  cursor: pointer;
  position: relative;
  background: #3498db;
  width: 140px;
  color: white;
  border: none;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0.75rem 1rem;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07);
}
.checkout-btn:hover {
  background: #217dbb;
}
.checkout-btn__success, .checkout-btn__failure {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.checkout-btn__success span, .checkout-btn__failure span {
  margin-right: 0.5rem;
}

JavaScript

const checkoutBtns = document.querySelectorAll(".checkout-btn");

checkoutBtns.forEach((btn, index) => {
  const checkoutTL = new gsap.timeline({
    paused: true
  });

const btnText = btn.querySelector(".checkout-btn__text");
  const btnIcon = btn.querySelector(".checkout-btn__icon");
  const btnSuccess = btn.querySelector(".checkout-btn__success");
  const btnFailure = btn.querySelector(".checkout-btn__failure");

checkoutTL
    .to(btnText, {
      opacity: 0,
      duration: 0.75,
      ease: "power4.in"
    })
    .to(
      btnIcon,
      {
        x: 150,
        delay: 0.25,
        duration: 0.75,
        opacity: 0,
        ease: "back.in(1.7)"
      },
      "<"
    );
  btn.addEventListener("click", () => {
    if (index === 0) {
      checkoutTL
        .to(btn, {
          background: "#27ae60",
          ease: "power4.out",
          width: 300
        })
        .to(
          btnSuccess,
          {
            opacity: 1,
            ease: "power4.out",
            delay: 0.25
          },
          "<"
        );
    } else {
      checkoutTL
        .to(btn, {
          background: "#c0392b",
          ease: "power4.out",
          width: 300
        })
        .to(
          btnFailure,
          {
            opacity: 1,
            ease: "power4.out",
            delay: 0.25
          },
          "<"
        );
    }

checkoutTL.play();

setTimeout(() => {
      checkoutTL.restart();
      checkoutTL.pause();
    }, 6000);
  });
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg