react+gsap实现爱心点赞动画效果代码-html代码-BFW代码库

react+gsap实现爱心点赞动画效果代码

代码语言：html

所属分类：动画

代码描述：react+gsap实现爱心点赞动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background: #b8e3ff;
}

main {
  position: relative;
}

.Button {
  width: 540px;
}
.Button .st0 {
  fill: #ed4956;
}
.Button .st1 {
  fill: #d83d50;
}
.Button #button {
  cursor: pointer;
  pointer-events: all;
}

.Count {
  position: absolute;
  right: 160px;
  top: 94px;
  font-family: "Pacifico";
  font-size: 72px;
  color: white;
  filter: drop-shadow(-3px 3px 0 #d83d50);
  pointer-events: none;
}

.Heart {
  position: absolute;
  width: 80px;
  left: 174px;
  top: 130px;
  filter: drop-shadow(-3px 3px 0 #d83d50);
  pointer-events: none;
}
.Heart .st0 {
  fill: white;
}
.Heart .st1 {
  fill: #dbdbdb;
}
</style>

</head>

<body>
    <div id="root"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/sass.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.15.4.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script>
    <script>
        const App = () => {
  let count = 0;

  const handleClick = e => {
    modelClick(e.currentTarget);
  };

  const modelClick = button => {
    count++;
    document.querySelector(".Count").textContent = count;

    if (count === 3) {
      viewBreakPhase1();
    } else if (count === 6) {
      viewBreakPhase2();
    } else if (count === 12) {
      viewBreakPhase3();
    } else if (count === 18) {
      viewBreakPhase4();
    } else if (count === 24) {
      viewBreakPhase5();
    }

    let clicks = 1;

    button.addEventListener("click", () => {
      clicks++;
    });

    viewClickButton();
    viewClickCount();

    setTimeout(() => {
      if (clicks === 1) {
        viewClickHeart();
      }
    }, 300);
  };

  const viewBreakPhase1 = () => {
    const tl = gsap.timeline();

    tl.to("#button #bottom", {
      duration: 1,
      ease: "back.out(4)",
      y: 12 });

  };

  const viewBreakPhase2 = () => {
    const tl = gsap.timeline();
.........完整代码请登录后点击上方下载按钮下载查看