CSS+JS实现的下载按钮动画（滚动数字+进度条动画）

技术频道 - html技术

CSS+JS实现的下载按钮动画（滚动数字+进度条动画）

作者:admin 时间:2023-4-11 21:41:35 浏览:

当点击下载按钮时，如果想在下载过程中，显示一下进程动画，或许本文介绍的实例会满足要求。

效果如图

demo download

实例介绍

本实例的按钮由CSS创建，需要JavaScript实现交互。当点击“Download”按钮时，按钮里显示从0%到100%的向上滚动数字，同时按钮底部出现一条从左向右延长的进度条，按钮左侧是一个下载动画图标。

HTML代码

该实例的HTML代码较多，不过结构还是很清晰的。

下载按钮是一个div，外部为一个a标签，其class值为dl-button。

class="icon"的div是一个图标容器，该下载图标是用SVG画出。

class="counter"的div是滚动百分比容器。

class="progress"的div是进度条动画容器。

<a class="dl-button" href="">
  <div>
    <div class="icon">
      <div>
        <svg class="arrow" viewBox="0 0 20 18" fill="currentColor">
          <polygon points="8 0 12 0 12 9 15 9 10 14 5 9 8 9"></polygon>
        </svg>
        <svg class="shape" viewBox="0 0 20 18" fill="currentColor">
          <path d="M4.82668561,0 L15.1733144,0 C16.0590479,...,0 4.82668561,0 Z"></path>
        </svg>
      </div><span></span>
    </div>
    <div class="label">
      <div class="show default"> Download</div>
      <div class="state">
        <div class="counter">
          <ul>
            <li></li>
            <li>1</li>
          </ul>
          <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>0</li>
          </ul>
          <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>0</li>
          </ul><span>%</span>
        </div><span>Done</span>
      </div>
    </div>
    <div class="progress"></div>
  </div>
</a>

CSS代码

该实例按钮由CSS创建，包含几个主要的类。

.dl-button设置下载按钮的样式。

.dl-button {
  --duration: 4000;
  --success: #16BF78;
  --grey-light: #99A3BA;
  --grey: #6C7486;
  --grey-dark: #3F4656;
  --light: #CDD9ED;
  --shadow: rgba(18, 22, 33, .6);
  --shadow-dark: rgba(18, 22, 33, .85);
  display: block;
  text-decoration: none;
  perspective: 500px;
}

div .icon设置下载图标的样式。

.dl-button > div .icon {
  --color: var(--grey);
  margin-right: 12px;
  position: relative;
  transform: translateZ(8px);
}
.dl-button > div .icon div {
  overflow: hidden;
  position: relative;
  width: 20px;
  height: 22px;
}
.dl-button > div .icon div:before, .dl-button > div .icon div:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  top: 2px;
  transition: opacity 0.3s ease;
}

div .label设置按钮状态（文字）的样式。

.dl-button > div .label {
  --color: var(--grey-dark);
  line-height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color);
  position: relative;
  transition: color 0.4s ease;
  transform: translateZ(8px);
}
.dl-button > div .label > div {
  display: flex;
  transition: opacity 0.25s ease;
}
.dl-button > div .label > div:not(.show) {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.dl-button > div .label > div.hide {
  opacity: 0;
}

此外，div .counter设置滚动百分比数字的样式，div .progress设置进度条的样式，相应CSS代码可在效果演示窗口或下载源码包里查看。

JavaScript

本实例点击按钮的动画交互使用JavaScript来实现，代码如下：

$('.dl-button').on('click', e => {

  let btn = $(e.currentTarget),
  label = btn.find('.label'),
  counter = label.find('.counter');

  if (!btn.hasClass('active') && !btn.hasClass('done')) {

    btn.addClass('active');

    setLabel(label, label.find('.default'), label.find('.state'));

    setTimeout(() => {
      counter.addClass('hide');
      counter.animate({
        width: 0 },
      400, function () {
        label.width(label.find('.state > span').width());
        counter.removeAttr('style');
      });
      btn.removeClass('active').addClass('done');
    }, getComputedStyle(btn[0]).getPropertyValue('--duration'));

  }

  return false;

});

function setLabel(div, oldD, newD, callback) {
  oldD.addClass('hide');
  div.animate({
    width: newD.outerWidth() },
  200, function () {
    oldD.removeClass('show hide');
    newD.addClass('show');
    div.removeAttr('style');
    if (typeof callback === 'function') {
      callback();
    }
  });
}