动态下载按钮动画效果-html代码-BFW代码库

动态下载按钮动画效果

代码语言：html

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


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

<style>
.button {
  --default: rgba(255, 255, 255, .2);
  --active: #fff;
  position: relative;
  border: none;
  outline: none;
  background: none;
  padding: 0;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  -webkit-transform: scale(var(--s, 1));
          transform: scale(var(--s, 1));
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
}
.button:active {
  --s: .96;
}
.button svg {
  display: block;
  fill: none;
  stroke-width: var(--sw, 3px);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.button .circle {
  width: 76px;
  height: 76px;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.button .circle circle.default {
  stroke: var(--default);
}
.button .circle circle.active {
  stroke: var(--active);
  stroke-dasharray: 227px;
  stroke-dashoffset: var(--active-offset, 227px);
  -webkit-transition: stroke-dashoffset var(--all-transition, 4s) ease var(--all-delay, 0.8s);
  transition: stroke-dashoffset var(--all-transition, 4s) ease var(--all-delay, 0.8s);
}
.button span {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 13px;
  font-weight: 500;
  font-size: 10px;
  color: var(--active);
  opacity: var(--count-opacity, 0);
  -webkit-transform: translateY(var(--count-y, 4px));
          transform: translateY(var(--count-y, 4px));
  -webkit-animation: var(--count, none) 0.3s ease forwards var(--all-delay, 4.6s);
          animation: var(--count, none) 0.3s ease forwards var(--all-delay, 4.6s);
  -webkit-transition: opacity .2s ease .6s, -webkit-transform .3s ease .6s;
  transition: opacity .2s ease .6s, -webkit-transform .3s ease .6s;
  transition: opacity .2s ease .6s, transform .3s ease .6s;
  transition: opacity .2s ease .6s, transform .3s ease .6s, -webkit-transform .3s ease .6s;
}
.button .icon {
  --sw: 2px;
  width: 24px;
  height: 40px;
  position: absolute;
  .........完整代码请登录后点击上方下载按钮下载查看