TweenMax+Physics2DPlugin实现炫酷拖放文件上传粒子带进度效果代码-html代码-BFW代码库

代码语言：html
所属分类：上传
代码描述：TweenMax+Physics2DPlugin实现炫酷拖放文件上传粒子带进度效果代码
代码标签： TweenMax Physics2DPlugin 炫酷拖放文件上传粒子进度
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">




  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;display=swap'>
  
<style>
:root {
  --primary: #5628EE;
  --success: #41D071;
  --grey-light: #99A3BA;
  --grey: #6C7486;
  --grey-dark: #3F4656;
  --light: #CDD9ED;
  --lighter: #E4ECFA;
  --shadow: rgba(18, 22, 33, .1);
}

.drop {
  --r: 0rad;
  width: 380px;
  height: 420px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 24px -2px var(--shadow);
  position: relative;
}
.drop nav {
  border-bottom: 1px solid var(--lighter);
  display: flex;
  align-items: center;
  padding: 0 16px;
}
.drop nav > svg {
  display: block;
  margin-right: 16px;
  width: 20px;
  height: 20px;
  color: var(--grey-light);
}
.drop nav ul {
  display: flex;
}
.drop nav ul:last-child {
  margin-left: auto;
}
.drop nav ul li {
  margin-bottom: -1px;
}
.drop nav ul li:not(:last-child) {
  margin-right: 16px;
}
.drop nav ul li a {
  display: block;
  font-weight: 500;
  font-size: 12px;
  line-height: 21px;
  color: var(--grey-light);
  text-decoration: none;
  padding: 12px 0 11px 0;
  border-bottom: 1px solid transparent;
}
.drop nav ul li a svg {
  width: 21px;
  height: 21px;
  display: block;
}
.drop nav ul li.active a {
  color: var(--primary);
  border-color: var(--primary);
}
.drop .center {
  --y: 52px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  transition: transform 0.3s ease;
  transform: translate(-50%, var(--y));
}
.drop .center > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 43px;
  width: 120px;
  background: var(--primary);
  border-radius: 5px;
  transition: width 0.2s ease, height 0.2s ease, border-radius 0.2s ease, opacity 0.4s ease;
  pointer-events: none;
}
.drop .center > div span,
.drop .center > div .circle, .drop .center > div > svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
}
.drop .center > div span, .drop .center > div > svg {
  color: #fff;
  transition: opacity 0.2s ease;
}
.drop .center > div span {
  font-weight: 500;
  font-size: 16px;
}
.drop .center > div > svg {
  width: 32px;
  height: 32px;
  opacity: 0;
}
.drop .center > div .circle {
  opacity: 0;
}
.drop .center > div .circle svg {
  width: 92px;
  height: 92px;
  color: var(--primary);
  display: block;
  transform: rotate(var(--r));
}
.drop .intro,
.drop .hint {
  --y: -76px;
  color: var(--grey);
  font-size: 14px;
  line-height: 23px;
  text-align: center;
  width: 100%;
  max-width: 220px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, var(--y));
  transition: opacity 0.2s ease, transform 0.4s ease;
  pointer-events: none;
}
.drop .intro h4,
.drop .hint h4 {
  margin-bottom: 8px;
  color: var(--grey-dark);
  font-family: inherit;
  font-weight: 500;
  font-size: 20px;
}
.drop .intro p,
.drop .hint p {
  margin: 0;
}
.drop .hint {
  --y: 80px;
  opacity: 0;
}
.drop ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.drop ul.list li {
  --y: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(var(--y));
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.drop ul.list li:not(:first-child) {
  border-top: 1px solid var(--lighter);
}
.drop ul.list li:nth-child(1) {
  transition-delay: 0.24s;
}
.drop ul.list li:nth-child(2) {
  transition-delay: 0.32s;
}
.drop ul.list li:nth-child(3) {
  transition-delay: 0.4s;
}
.drop ul.list li:nth-child(4) {
  transition-delay: 0.48s;
}
.drop ul.list li:nth-child(5) {
  transition-delay: 0.56s;
}
.drop ul.list li img {
  border-radius: 5px;
  width: 84px;
  height: 48px;
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: 12px;
  box-shadow: 0 4px 12px var(--shadow);
}
.drop ul.list li .text strong {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--grey-dark);
  margin-bottom: 4px;
}
.drop ul.list li .text small {
  display: block;
  color: var(--grey-light);
  font-size: 14px;
}
.drop ul.list li .progress {
  margin-left: auto;
  border-radius: 50%;
  background: var(--light);
  position: relative;
}
.drop ul.list li .progress:before {
  --s: 1;
  content: "";
  width: 28px;
  height: 28px;
  left: 50%;
  top: 50%;
  z-index: 1;
  position: absolute;
  background: #fff;
  border-radius: inherit;
  transform: translate(-50%, -50%) scale(var(--s));
  transition: transform 0.32s ease;
}
.drop ul.list li .progress svg {
  display: block;
  fill: none;
}
.drop ul.list li .progress svg.pie {
  --s: 1;
  width: 32px;
  height: 32px;
  transform: rotate(-90deg) scale(var(--s));
  transition: transform 0.5s ease;
}
.drop ul.list li .progress svg.pie circle {
  stroke-width: 16;
  stroke: var(--primary);
}
.drop ul.list li .progress svg.tick {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: var(--primary);
  transition: stroke 0.3s ease 0.8s;
}
.drop ul.list li .progress svg.tick polyline {
  stroke-dasharray: 18 18 18;
  stroke-dashoffset: 18;
  transition: stroke-dashoffset 0.4s ease 0.7s;
}
.drop ul.list li .progress.complete {
  background: none;
}
.drop ul.list li .progress.complete:before {
  --s: 0;
}
.drop ul.list li .progress.complete svg.pie {
  --s: .08;
  -webkit-animation: tick 0.3s linear forwards 0.4s;
          animation: tick 0.3s linear forwards 0.4s;
}
.drop ul.list li .progress.complete svg.tick {
  stroke: var(--success);
}
.drop ul.list li .progress.complete svg.tick polyline {
  stroke-dashoffset: 36;
}
.drop.dragged .center {
  --y: 4px;
}
.drop.dragged .center > div {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  -webkit-animation: move 2s ease-in-out infinite 0.2s;
          animation: move 2s ease-in-out infinite 0.2s;
}
.drop.dragged .center > div span {
  opacity: 0;
}
.drop.dragged .center > div > svg {
  opacity: 1;
  transition-delay: 0.2s;
}
.drop.dragged .center > div .circle {
  opacity: 1;
  transition: opacity 0s ease 0.2s;
}
.drop.dragged .intro {
  --y: -120px;
  opacity: 0;
}
.drop.dragged .hint {
  --y: 60px;
  opacity: 1;
}
.drop.dropped .center > div {
  background: none;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.drop.dropped .center > div .circle svg {
  -webkit-animation: scale 0.7s linear 0.4s;
          animation: scale 0.7s linear 0.4s;
}
.drop.show .center {
  --y: -40px;
}
.drop.show .center > div {
  opacity: 0;
}
.drop.show .list li {
  --y: 0;
  opacity: 1;
}
.drop.show .hint {
  --y: 40px;
  opacity: 0;
}

#emitter {
  position: absolute;
  left: 0;
  top: 0;
}

.dot {
  background-color: var(--primary);
  border-radius: 50%;
  position: fixed;
  z-index: 5;
  pointer-events: none;
  display: none;
  top: 0;
  left: 0;
}

@-webkit-keyframes move {
  50% {
    transform: translate(-50%, -70%);
  }
}

@keyframes move {
  50% {
    transform: translate(-50%, -70%);
  }
}
@-webkit-keyframes scale {
  40% {
    transform: scale(0.92) rotate(var(--r));
  }
}
@keyframes scale {
  40% {
    transform: scale(0.92) rotate(var(--r));
  }
}
@-webkit-keyframes tick {
  100% {
    transform: rotate(-90deg) translate(0, -6px) scale(var(--s));
  }
}
@keyframes tick {
  100% {
    transform: rotate(-90deg) translate(0, -6px) scale(var(--s));
  }
}
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  font-family: Roboto, Arial;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--light);
  padding: 20px;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
body .dribbble img {
  display: block;
  height: 28px;
}
</style>


  
</head>

<body >
  <div class="drop">
    <nav>
        <svg>
            <use xlink:href="#logo">
        </svg>
        <ul>
            <li class="active">
                <a href="">Recent uploads</a>
            </li>
            <li>
                <a href="">Watched folders</a>
            </li>
        </ul>
        <ul>
            <li>
                <a href="">
                    <i data-eva="cloud-upload-outline"></i>
                </a>
            </li>
            <li>
                <a href="">
                    <i data-eva="settings-outline"></i>
                </a>
            </li>
        </ul>
    </nav>
    <div class="intro">
        <h4>No recents</h4>
        <p>Drag &amp; Drop to upload or create a new watch folder for Auto-upload</p>
    </div>
    <div class="center">
        <div>
            <span>Upload</span>
            <div class="circle">
                <svg viewBox="0 0 92 92" fill="currentColor">
                    <path d="M46,80 C55.3966448,80 63.9029705,76.1880913 70.0569683,70.0262831 C76.2007441,63.8747097 80,55.3810367 80,46 C80,36.6003571 76.1856584,28.0916013 70.0203842,21.9371418 C63.8692805,15.7968278 55.3780386, 12 46, 12 C36.596754, 12 28.0850784,15.8172663 21.9300655,21.9867066 C15.7939108,28.1372443 12,36.6255645 12,46 C12,55.4035343 15.8175004,63.9154436 21.9872741,70.0705007 C28.1377665,76.2063225 36.6258528,80 46,80 Z"></path>
                </svg>
            </div>
            <svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M5.2319,10.6401 C5.5859,11.0641 6.2159,11.1221 6.6399,10.7681 L10.9999,7.1351 L10.9999,19.0001 C10.9999,19.5521 11.4479,20.0001 11.9999,20.0001 C12.5519,20.0001 12.9999,19.5521 12.9999,19.0001 L12.9999,7.1351 L17.3599,10.7681 C17.7849,11.1221 18.4149,11.0641 18.7679,10.6401 C19.1219,10.2161 19.0649,9.5851 18.6399,9.2321 L12.6399,4.2321 C12.5929,4.1921 12.5369,4.1731 12.4849,4.1431 C12.4439,4.1191 12.4079,4.0911 12.3629,4.0731 C12.2459,4.0271 12.1239,4.0001 11.9999,4.0001 C11.8759,4.0001 11.7539,4.0271 11.6369,4.0731 C11.5919,4.0911 11.5559,4.1191 11.5149,4.1431 C11.4629,4.1731 11.4069,4.1921 11.3599,4.2321 L5.3599,9.2321 C4.9359,9.5851 4.8779,10.2161 5.2319,10.6401"></path>
            </svg>
        </div>
    </div>
    <div class="hint">Drop your files to upload</div>
    <ul class="list"></ul>
</div>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
        <path fill="currentColor" fill-rule="evenodd" d="M0.879787868,0.0248590022 C0.741480414,0.0254663774 0.601464378,0.058308026 0.470823634,0.126854664 L0.470823634,0.126854664 C0.0390783178,0.353275488 -0.12560262,0.883253796 0.102996777,1.31071584 L0.102996777,1.31071584 C1.55958412,4.03509761 2.28748351,7.0237744 2.2870016,10.0124078 L2.2870016,10.0124078 C2.28748351,13.0010412 1.55958412,15.9897614 0.102996777,18.7140564 L0.102996777,18.7140564 C-0.12560262,19.1415618 0.0390783178,19.6716269 0.470823634,19.8979176 L0.470823634,19.8979176 C0.601771047,19.9666377 0.742356609,19.9995228 0.880970732,20 L0.880970732,20 L0.886666003,20 C1.20275352,19.9990889 1.50802002,19.8298482 1.66630473,19.5337093 L1.66630473,19.5337093 C3.25861475,16.5555748 4.05507643,13.2887202 4.05608406,10.021692 L4.05608406,10.021692 L4.05621549,10.021692 C4.05621549,10.0185683 4.05617168,10.0154881 4.05617168,10.0124078 L4.05617168,10.0124078 C4.05617168,10.0093275 4.05621549,10.0062039 4.05621549,10.0031236 L4.05621549,10.0031236 L4.05608406,10.0031236 C4.05507643,6.73605206 3.25861475,3.4691974 1.66630473,0.491106291 L1.66630473,0.491106291 C1.50828288,0.195531453 1.20362971,0.0263774403 0.888111725,0.0248590022 L0.888111725,0.0248590022 L0.879787868,0.0248590022 Z M5.53448867,2.19370933 C5.08316038,2.37887202 4.86888678,2.89119306 5.05577927,3.33804772 L5.05577927,3.33804772 C5.94419767,5.46195228 6.39504405,7.70438178 6.39587643,10.0031236 L6.39587643,10.0031236 L6.39583262,10.0031236 C6.39583262,10.0062039 6.39587643,10.0093275 6.39592024,10.0124078 L6.39592024,10.0124078 C6.39587643,10.0154881 6.39583262,10.0185683 6.39583262,10.021692 L6.39583262,10.021692 L6.39587643,10.021692 C6.39504405,12.3204338 5.94419767,14.5629067 5.05577927,16.6867679 L5.05577927,16.6867679 C4.86888678,17.1336659 5.0831.........完整代码请登录后点击上方下载按钮下载查看