动态下载按钮动画效果-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);
}
.but.........完整代码请登录后点击上方下载按钮下载查看