下载动画

下载代码

html

css

分享到微信朋友圈

html

<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-.335 3.448z" stroke="#000" stroke-opacity=".25" stroke-width="2"/>
  <rect x="371.383" y="71.127" width="18" height="18" rx="2" transform="rotate(13.677 371.383 71.127)" stroke="#000" stroke-opacity=".25" stroke-width="2"/>
  <rect x="189.25" y="411.352" width="18" height="18" rx="2" transform="rotate(62.035 189.25 411.352)" stroke="#000" stroke-opacity=".25" stroke-width="2"/>
  <circle cx="625" cy="531" r="2" fill="#000" fill-opacity=".25"/>
  <path d="M597.914 89.594a1 1 0 10-1.828.812l1.828-.812zm-5.241 28.467a.998.998 0 101.654-1.122l-1.654 1.122zM597 90l-.914.406.003.006.01.024.044.104a26.42 26.42 0 01.696 1.88c.402 1.23.831 2.839.978 4.422.149 1.61-.01 3.036-.616 4.027-.552.905-1.593 1.631-3.701 1.631v2c2.642 0 4.414-.961 5.408-2.588.941-1.54 1.064-3.49.9-5.254-.166-1.792-.643-3.558-1.068-4.86a29.717 29.717 0 00-.753-2.034l-.052-.123a.41.41 0 01-.015-.033l-.004-.01-.001-.002-.001-.002L597 90zm-3.5 12.5c-1.301 0-2.384.239-3.235.74a3.843 3.843 0 00-1.72 2.126c-.558 1.646-.16 3.672.446 5.455.622 1.835 1.546 3.646 2.303 4.984a40.667 40.667 0 001.265 2.086l.082.124.023.033a.035.035 0 00.006.009l.002.003v.001l.828-.561.828-.561-.001-.002-.004-.006-.018-.026-.073-.111a37.75 37.75 0 01-1.197-1.974c-.729-1.287-1.585-2.976-2.15-4.641-.583-1.717-.778-3.191-.446-4.17.152-.447.414-.794.841-1.046.448-.264 1.146-.463 2.22-.463v-2zM375.165 480.285a1 1 0 10-.761-1.849l.761 1.849zm-28.521 3.616a1 1 0 001.755.961l-1.755-.961zm28.141-4.54l-.38-.925v-.001.001l-.003.001-.019.007-.084.033a17.822 17.822 0 01-1.599.509c-1.065.285-2.493.569-3.988.588-1.499.02-3.001-.228-4.27-.945-1.243-.702-2.34-1.897-2.989-3.933l-1.906.608c.794 2.489 2.205 4.102 3.911 5.066 1.68.95 3.568 1.226 5.28 1.204 1.715-.022 3.317-.345 4.479-.656a19.94 19.94 0 001.796-.573l.108-.042a.917.917 0 00.03-.012l.009-.004.003-.001h.002l-.38-.925zm-13.332-4.665c-.393-1.232-.964-2.185-1.791-2.728-.874-.573-1.843-.566-2.727-.268-.854.287-1.691.861-2.467 1.537-.786.685-1.568 1.527-2.309 2.421-1.483 1.788-2.862 3.851-3.864 5.455a70.7 70.7 0 00-1.531 2.574l-.088.157-.023.041a.066.066 0 00-.006.012l-.002.003v.001l.876.48.878.481v-.001l.001-.002.005-.008.02-.037.082-.148a67.899 67.899 0 011.485-2.493c.98-1.57 2.305-3.549 3.706-5.238.701-.844 1.406-1.599 2.084-2.19.688-.6 1.294-.982 1.792-1.15.468-.157.761-.105.991.046.278.182.654.632.982 1.663l1.906-.608z" fill="#000" fill-opacity=".25"/>
</svg>

css

: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;
}

JavaScript

const download = document.querySelector('.download');
const background = document.querySelector('.background');
const folderFront = document.querySelector('.folder-front');
const size = gsap.getProperty(download, '--size');

const playspeed = 1;

const keyframes = [
/*  0 */0.00, //s
/*  1 */0.20, //s
/*  2 */0.27, //s
/*  3 */0.35, //s
/*  4 */0.55, //s
/*  5 */2.00 //s
];

const timespan = (start, end) => ({
  delay: keyframes[start] * (1 / playspeed),
  duration: (keyframes[end] - keyframes[start]) * (1 / playspeed) });

const handleClick = () => {
  const page = document.createElement('div');
  page.classList.add('page-2');
  download.insertBefore(page, folderFront);

/* Page */
  // Fall
  gsap.fromTo(page, {
    '--ratio-page-2-offset': 1,
    '--ratio-page-2-height': 1 },
  {
    '--ratio-page-2-offset': 0,
    ...timespan(0, 3),
    onComplete: () => {
      page.remove();
    } });

// Fade in
  gsap.fromTo(page, {
    '--opacity-page-2': 0 },
  {
    '--opacity-page-2': 1,
    ...timespan(0, 1) });

// Height
  gsap.to(page, {
    '--ratio-page-2-height': 0.5,
    ...timespan(2, 3) });

/* Pages */
  // Scale
  gsap.fromTo(download, {
    '--scale-pages': 1 },
  {
    '--scale-pages': 0.8,
    ...timespan(3, 4) });

gsap.to(download, {
    '--scale-pages': 1,
    ease: 'elastic',
    ...timespan(4, 5) });

/* Folder */
  // Scale
  gsap.fromTo(download, {
    '--scale-folder': 1 },
  {
    '--scale-folder': 1.12,
    ...timespan(3, 4) });

gsap.to(download, {
    '--scale-folder': 1,
    ease: 'elastic',
    ...timespan(4, 5) });

/* Background */
  // Scale
  gsap.fromTo(background, {
    scale: 1 },
  {
    scale: 1.1,
    ease: 'sine.inOut',
    ...timespan(3, 4) });

gsap.to(background, {
    scale: 1,
    ease: 'elastic',
    ...timespan(4, 5) });

};

download.addEventListener('click', handleClick);
handleClick();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg