gsap实现书签布料自然下垂动画效果代码-html代码-BFW代码库

gsap实现书签布料自然下垂动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现书签布料自然下垂动画效果代码

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


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

<head>

  <meta charset="UTF-8">


  
  
<style>
.bookmark {
  --color: #1E2235;
  --back: #ECEFFC;
  --default-position: 32px;
  --default-y: 0px;
  --background-height: 17px;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
  background: none;
  border: none;
  padding: 0;
  margin: 5px 0 0 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.bookmark:before {
  content: "";
  position: absolute;
  top: 0;
  left: 9px;
  width: 18px;
  height: 19px;
  border-radius: 1px;
  -webkit-clip-path: inset(0 -1px var(--background-height) -1px);
          clip-path: inset(0 -1px var(--background-height) -1px);
  background: var(--color);
  transform: translateZ(0);
}
.bookmark svg {
  display: block;
  width: 36px;
  height: 36px;
  margin-top: -5px;
  stroke: var(--color);
  stroke-width: 2px;
  stroke-linejoin: round;
  stroke-linecap: round;
  position: relative;
  z-index: 1;
  transform: translateZ(0);
}
.bookmark svg path {
  fill: var(--fill, var(--back));
  transform: translateZ(0);
}
.bookmark svg path.default {
  --fill: var(--default-fill, var(--back));
  -webkit-clip-path: circle(var(--default-position) at 50% 100%);
          clip-path: circle(var(--default-position) at 50% 100%);
}
.bookmark svg path.filled {
  --fill: var(--color);
}
.bookmark svg path.default, .bookmark svg path.filled {
  transform: translateY(var(--default-y)) translateZ(0);
}

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: "Inter", Arial;
  justify-content: center;
  align-items: center;
  background: #ECEFFC;
}
body > label {
  margin: 0 16px;
}
body > label.radio {
  margin: 0 4px;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
body .dribbble img {
  display: block;
  height: 28px;
}
body .twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
}
body .twitter svg {
  width: 32px;
  height: 32px;
  fill: #1da1f2;
}
</style>



</head>

<body  >
  <button class="bookmark">
    <svg viewBox="0 0 36 36">
        <path class="filled" d="M26 6H10V18V30C10 30 17.9746 23.5 18 23.5C18.0254 23.5 26 30 26 30V18V6Z" />
        <path class="default" d="M26 6H10V18V30C10 30 17.9746 23.5 18 23.5C18.0254 23.5 26 30 26 30V18V6Z" />
        <path class="corner" d="M10 6C10 6 14.8758 6 18 6C21.1242 6 26 6 26 6C26 6 26 6 26 6H10C10 6 10 6 10 6Z" />
    </svg>
</button>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MorphSVGPlugin3.min.js"></script>
      <script >
gsap.registerPlugin(MorphSVGPlugin);

document.querySelectorAll('.bookmark').forEach(button => {
  button.addEventListener('pointerdown', e => {
    if (!button.classList.contains('marked')) {
      return;
    }
    gsap.to(button.querySelectorAll('.default, .filled'), {
      morphSVG: 'M26 6H.........完整代码请登录后点击上方下载按钮下载查看