gsap+svg实现点赞喜欢按钮点击动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：gsap+svg实现点赞喜欢按钮点击动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&amp;display=swap'>
  
<style>
.high-five {
  --hands-x: 4px;
  --hands-o: 0;
  --success-clip: 0%;
  --success-o: 0;
  --success-text-o: 0;
  font-family: "Poppins", Arial;
  font-size: 16px;
  font-weight: 600;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  color: #ff7576;
  background-color: #fff;
  border: none;
  outline: none;
  padding: 12px 0;
  width: 124px;
  text-align: center;
  position: relative;
  line-height: 20px;
  box-shadow: 0px 4px 16px rgba(255, 146, 149, 0.1), 0px 1px 2px rgba(255, 146, 149, 0.1);
  border-radius: 7px;
  transform: translateZ(0);
  transition: transform 0.15s, background-color 0.15s;
}
.high-five:active {
  transform: scale(0.98, 0.97) translateZ(0);
}
.high-five .hands {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: var(--hands-o);
  pointer-events: none;
}
.high-five .hands svg {
  display: block;
  width: 32px;
  height: 36px;
  fill: #fff;
  stroke-width: 1.5;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 0.15s;
}
.high-five .hands svg ellipse {
  stroke: none;
}
.high-five .hands svg.left {
  position: relative;
  z-index: 1;
  transform: translateX(var(--hands-x));
}
.high-five .hands svg.right {
  transform: translateX(calc(var(--hands-x) * -1)) scaleX(-1);
}
.high-five .success {
  background-color: #ff7576;
  color: #fff;
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: inherit;
  border-radius: inherit;
  overflow: hidden;
  -webkit-clip-path: circle(var(--success-clip));
          clip-path: circle(var(--success-clip));
  opacity: var(--success-o);
  transition: background-color 0.15s;
}
.high-five .success span {
  opacity: var(--success-text-o);
}
.high-five:hover {
  background-color: #fffcfc;
}
.high-five:hover .hands svg {
  fill: #fffcfc;
}
.high-five:hover .success {
  background-color: #fe6c6d;
}

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: "Poppins", Arial;
  justify-content: center;
  align-items: center;
  background-color: #ffeeef;
}
body .twitter {
  position: fixed;
  display: block;
  right: 12px;
  bottom: 12px;
}
body .twitter svg {
  width: 32px;
  height: 32px;
  fill: #1da1f2;
}
</style>



</head>

<body >
  <button class="high-five">
  Like
  <div class="hands">
    <svg class="left" viewBox="0 0 32 36">
      <ellipse cx="14" cy="13" rx="9" ry="11" />
      <path
        d="M16.0011 5.5C15.5011 3.5 13.5012 4 12.5012 5.5C11.5012 7 9.5 14 9.75 20M16.0011 5.5C14.9998 8 13.9981 12 13.9994 16.5M16.0011 5.5C16.5011 4.5 17.5646 2.5 18.4994 2.5C19.737 2.5 20.7439 3.28645 20.5011 4.5M23.4981 7.5C23.4981 7.5 21.9994 12 21.9994 16M23.4981 7.5C24.9981 5.5 27.0011 7 27.0011 8.5C26.7527 10.9503 25.2188 11.8879 25.4985 25.5C25.6052 30.6943 21.6939 34 16.4985 34C11.5003 34 6.59828 29.4598 6.0011 23.5C5.5001 18.5 6.64678 15.1392 7.50115 14C9.00115 12 9.51575 14.5859 9.50102 16C9.48502 17.5364 9.65 20 9.65 20M23.4981 7.5C24 6 23.5 2.5 20.5011 4.5M20.5011 4.5C19.0011 8 17.9994 11.5 17.9994 16.5"
      />
    </svg>
    <svg class="right" viewBox="0 0 32 36">
      <ellipse cx="14" cy="13" rx="9" ry="11" />
      <path
        d="M16.0011 5.5C15.5011 3.5 13.5012 4 12.5012 5.5C11.5012 7 9.5 14 9.75 20M16.0011 5.5C14.9998 8 13.9981 12 13.9994 16.5M16.0011 5.5C16.5011 4.5 17.5646 2.5 18.4994 2.5C19.737 2.5 20.7439 3.28645 20.5011 4.5M23.4981 7.5C23.4981 7.5 21.9994 12 21.9994 16M23.4981 7.5C24.9981 5.5 27.0011 7 27.0011 8.5C26.7527 10.9503 25.2188 11.8879 25.4985 25.5C25.6052 30.6943 21.6939 34 16.4985 34C11.5003 34 6.59828 29.4598 6.0011 23.5C5.5001 18.5 6.64678 15.1392 7.50115 14C9.001.........完整代码请登录后点击上方下载按钮下载查看