卡卡網(wǎng)

當(dāng)點(diǎn)擊下載按鈕時(shí)，如果想在下載過(guò)程中，顯示一下進(jìn)程動(dòng)畫(huà)，或許本文介紹的實(shí)例會(huì)滿足要求。

效果如圖

demodownload

實(shí)例介紹

本實(shí)例的按鈕由CSS創(chuàng)建，需要JavaScript實(shí)現(xiàn)交互。當(dāng)點(diǎn)擊“Download”按鈕時(shí)，按鈕里顯示從0%到100%的向上滾動(dòng)數(shù)字，同時(shí)按鈕底部出現(xiàn)一條從左向右延長(zhǎng)的進(jìn)度條，按鈕左側(cè)是一個(gè)下載動(dòng)畫(huà)圖標(biāo)。

HTML代碼

該實(shí)例的HTML代碼較多，不過(guò)結(jié)構(gòu)還是很清晰的。

下載按鈕是一個(gè)div，外部為一個(gè)a標(biāo)簽，其class值為dl-button。

class="icon"的div是一個(gè)圖標(biāo)容器，該下載圖標(biāo)是用SVG畫(huà)出。

class="counter"的div是滾動(dòng)百分比容器。

class="progress"的div是進(jìn)度條動(dòng)畫(huà)容器。

<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代碼

該實(shí)例按鈕由CSS創(chuàng)建，包含幾個(gè)主要的類(lèi)。

.dl-button設(shè)置下載按鈕的樣式。

.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設(shè)置下載圖標(biāo)的樣式。

.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設(shè)置按鈕狀態(tài)（文字）的樣式。

.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設(shè)置滾動(dòng)百分比數(shù)字的樣式，div .progress設(shè)置進(jìn)度條的樣式，相應(yīng)CSS代碼可在效果演示窗口或下載源碼包里查看。

JavaScript

本實(shí)例點(diǎn)擊按鈕的動(dòng)畫(huà)交互使用JavaScript來(lái)實(shí)現(xiàn)，代碼如下：

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

總結(jié)

本文介紹了如何使用CSS+JS實(shí)現(xiàn)下載按鈕的動(dòng)畫(huà)效果，該下載動(dòng)畫(huà)包含三個(gè)部分：下載圖標(biāo)動(dòng)畫(huà)，滾動(dòng)的數(shù)字和進(jìn)度條動(dòng)畫(huà)。如果你喜歡這個(gè)效果，可直接下載源碼使用。

相關(guān)文章

• CSS實(shí)現(xiàn)漂亮的激活按鈕動(dòng)畫(huà)(Activate Button animation)
• CSS3實(shí)現(xiàn)的發(fā)光動(dòng)畫(huà)按鈕(有光隨鼠標(biāo)移動(dòng)的懸停效果)
• 4款CSS 3D按鈕點(diǎn)擊過(guò)渡效果
• 16款精美的CSS3動(dòng)畫(huà)按鈕（有懸停動(dòng)畫(huà)效果）
• 9個(gè)CSS鼠標(biāo)懸停效果
• 6個(gè)CSS按鈕邊框過(guò)渡動(dòng)畫(huà)效果
• 30個(gè)漂亮的CSS漸變按鈕，鼠標(biāo)滑過(guò)(hover)動(dòng)畫(huà)效果
• 很好看的css3動(dòng)畫(huà)按鈕鼠標(biāo)懸停效果【2個(gè)實(shí)例】
• 漂亮懸停效果的CSS3動(dòng)畫(huà)按鈕【5個(gè)實(shí)例代碼】

標(biāo)簽: button  動(dòng)畫(huà)按鈕  動(dòng)畫(huà)  下載進(jìn)程動(dòng)畫(huà)  下載按鈕動(dòng)畫(huà)