卡卡网

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

效果如图

demodownload

实例介绍

本实例的按钮由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>

广告

海外云服务器

5M CN2/GIA 低至$2/月

立即咨询 >

Jtti

立即咨询 >

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();
    }
  });
}

总结

本文介绍了如何使用CSS+JS实现下载按钮的动画效果，该下载动画包含三个部分：下载图标动画，滚动的数字和进度条动画。如果你喜欢这个效果，可直接下载源码使用。

相关文章

• CSS实现漂亮的激活按钮动画(Activate Button animation)
• CSS3实现的发光动画按钮(有光随鼠标移动的悬停效果)
• 4款CSS 3D按钮点击过渡效果
• 16款精美的CSS3动画按钮（有悬停动画效果）
• 9个CSS鼠标悬停效果
• 6个CSS按钮边框过渡动画效果
• 30个漂亮的CSS渐变按钮，鼠标滑过(hover)动画效果
• 很好看的css3动画按钮鼠标悬停效果【2个实例】
• 漂亮悬停效果的CSS3动画按钮【5个实例代码】

标签: button  动画按钮  动画  下载进程动画  下载按钮动画