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>
  .........完整代码请登录后点击上方下载按钮下载查看