gsap实现下载文件动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap实现下载文件动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
  --size: 100px;
  --size-folder-back: var(--size);
  --size-page-1: calc(var(--size) * 0.55);
  --size-page-2: calc(var(--size) * 0.65);
  --size-folder-front: var(--size);
  --ratio-page-1: 0.95;
  --ratio-page-2: 1.05;
  --ratio-page-2-height: 0.5;
  --ratio-page-2-offset: 0;
  --scale-folder: 1;
  --scale-pages: 0.7;
  --opacity-page-2: 1;
}

body {
  background-color: #F4F2F9;
  overflow: hidden;
}

.download,
.folder-back,
.page-1,
.page-2,
.folder-front,
.background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.download {
  width: var(--size);
  height: var(--size);
  cursor: pointer;
  filter: drop-shadow(rgba(0, 0, 0, 0.09) 4px 8px 12px) drop-shadow(rgba(0, 0, 0, 0.06) 2px 4px 6px) drop-shadow(rgba(0, 0, 0, 0.03) 1px 2px 3px);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

.folder-back {
  width: var(--size-folder-back);
  height: var(--size-folder-back);
  transform-origin: 50% 100%;
  transform: translate(-50%, -50%) scaleY(var(--scale-folder));
}

.page-1 {
  width: calc(var(--size-page-1) * var(--ratio-page-1));
  height: calc(var(--size-page-1) / var(--ratio-page-1));
  border-radius: 8px;
  background-color: #F2EEF7;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
  transform-origin: 50% 90%;
  transform: translate(-50%, -50%) translateY(calc((1 - var(--scale-pages)) * -65%)) scale(var(--scale-pages));
}

.page-2 {
  width: calc(var(--size-page-2) * var(--ratio-page-2));
  height: calc((var(--size-page-2) * var(--ratio-page-2-height)) / var(--ratio-page-2));
  border-radius: 10px;
  background-color: #FFFEFF;
  opacity: var(--opacity-page-2);
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
  transform: translate(-50%, -50%) translateY(17%) translateY(calc((1 - var(--scale-pages)) * -85%)) translateY(calc(var(--size) * -1.2 * var(--ratio-page-2-offset))) translateY(calc((1 - var(--ratio-page-2-height)) * -65%)) scale(var(--scale-pages));
}

.folder-front {
  width: var(--size-folder-front);
  height: var(--size-folder-front);
  transform-origin: 50% 100%;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
  transform: translate(-50%, -50%) scaleY(calc(var(--scale-folder) * var(--scale-folder)));
}

.background {
  opacity: 0.25;
  pointer-events: none;
}

.dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
.dribbble img {
  display: block;
  height: 28px;
}

.twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
}
.twitter svg {
  width: 32px;
  height: 32px;
  fill: #1da1f2;
}
</style>

</head>
<body translate="no">

<div class="download">
<svg class="folder-back" viewBox="0 0 48 48">
<path d="
      M  3.50  7.50
      C  3.50  5.29   5.28  3.50   7.49  3.50
      C 13.17  3.50  23.18  3.50  26.00  3.50
      C 30.00  3.50  28.00  6.00  32.00  6.00
      C 34.21  6.00  37.87  6.00  40.71  6.00
      C 42.93  6.00  44.73  7.82  44.71 10.04
      L 44.54 25.04
      C 44.52 27.24  42.74 29.00  40.54 29.00
      H  7.50
      C  5.29 29.00   3.50 27.21   3.50 25.00
      V  7.50
      Z
    " fill="#32AF75" />
</svg>
<div class="page-1"></div>
<div class="page-2"></div>
<svg class="folder-front" viewBox="0 0 48 48">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#47DB99;stop-opacity:1" />
<stop offset="100%" style="stop-color:#2EA16D;stop-opacity:1" />
</linearGradient>
</defs>
<path d="
      M  2.36 24.31
      C  2.17 23.09   3.11 22.00   4.34 22.00
      H 40.90
      C 41.80 22.00  42.33 23.00  41.83 23.75
      L 41.40 24.40
      C 41.16 24.76  41.16 25.24  41.40 25.60
      V 25.60
      C 41.73 26.10  42.40 26.23  42.90 25.90
      L 43.50 25.50
      V 25.50
      C 44.75 24.88  46.17 25.93  45.94 27.31
      L 43.57 41.17
      C 43.24 43.09  41.57 44.50  39.63 44.50
      H  8.93
      C  6.95 44.50   5.28 43.06   4.97 41.11
      L  2.36 24.31
      Z
    " fill="url(#gradient)" />
</svg>
</div>

<svg class="background" width="800" height="600" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M145.794 161.461l-.597 15.577c-.059 1.538-1.762 2.436-3.065 1.615l-13.191-8.305c-1.303-.821-1.229-2.744.133-3.462l13.788-7.271c1.362-.718 2.991.307 2.932 1.846zm541.372 173.611l-14.19 6.452c-1.402.637-2.968-.482-2.819-2.015l1.508-15.515c.149-1.532 1.901-2.329 3.153-1.434l12.683 9.064c1.253.895 1.067 2.81-.........完整代码请登录后点击上方下载按钮下载查看