卡卡網(wǎng)

本文介紹一個(gè)CSS實(shí)現(xiàn)的漂亮好看的激活按鈕動畫（Activate Button animation），它適用于一些需要驗(yàn)證的交互網(wǎng)頁里。

效果如圖

demodownload

實(shí)例介紹

本動畫實(shí)例可分四個(gè)階段，每個(gè)階段顯示的樣式不一樣，這四個(gè)階段不間斷自動銜接，形成一個(gè)個(gè)性化的動畫：

1. CSS實(shí)現(xiàn)的“激活”按鈕，左側(cè)為一個(gè)向上的箭頭圖標(biāo)；
2. 點(diǎn)擊后，“激活”文字變成“等待...”，同時(shí)左側(cè)箭頭變成轉(zhuǎn)動的圓環(huán)；
3. 稍后文字提示變成“完成”，這時(shí)左側(cè)圖標(biāo)變成一個(gè)打√的圖標(biāo)；
4. 稍等1秒后，按鈕文字和圖標(biāo)再恢復(fù)原狀。

HTML代碼

HTML結(jié)構(gòu)中，最外層是一個(gè)a標(biāo)簽，第二層是一個(gè)<span></span>標(biāo)簽，與一個(gè)<ul></ul>標(biāo)簽。

span標(biāo)簽里含有3個(gè)svg畫布，ul標(biāo)簽里是3個(gè)li列舉。

<a class="activate">
    <span>
        <svg>
            <use xlink:href="#circle">
        </svg>
        <svg>
            <use xlink:href="#arrow">
        </svg>
        <svg>
            <use xlink:href="#check">
        </svg>
    </span>
    <ul>
        <li>激 活</li>
        <li>等待...</li>
        <li>完 成</li>
    </ul>
</a>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="circle">
        <circle cx="8" cy="8" r="7.5"></circle>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" id="arrow">
        <path d="M2.7008908,5.37931459 L2.7008908,5.37931459... Z"></path>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" id="check">
            <path id="test" d="M4.76499011,6.7673683... Z"></path>
    </symbol>
</svg>

CSS代碼

CSS代碼中，.activate是設(shè)置按鈕的樣式，.activate span是設(shè)置按鈕圖標(biāo)的樣式，.activate ul則是設(shè)置按鈕文字的樣式。

部分代碼如下：

.activate {
  display: table;
  background: #5628EE;
  box-shadow: 0 4px 20px rgba(86, 40, 238, 0.15);
  line-height: 20px;
  padding: 12px;
  border-radius: 22px;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.activate span {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  margin: 0 4px 0 0;
  position: relative;
  overflow: hidden;
}
.activate ul {
  padding: 0;
  margin: 0;
  list-style: none;
  height: 20px;
  width: 60px;  /* 文字容器寬度 */
  display: inline-block;
  vertical-align: top;
  text-align: center;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

需要特別指出的是，如果你想改變按鈕的文字，那么需要重新定義按鈕文字容器的寬度，代碼是這個(gè)：

.activate ul {
  padding: 0;
  margin: 0;
  list-style: none;
  height: 20px;
  width: 60px;  /* 按鈕文字容器寬度 */
}

JavaScript

本實(shí)例需要用到一點(diǎn)JavaScript編程，它的作用是觸發(fā)并自動完成4個(gè)激活過程（觸發(fā)、等待、完成、復(fù)原），使用的JQuery方法是addClass()和removeClass()。代碼如下：

$('.activate').on('click touch', function (e) {
  var self = $(this);
  if (!self.hasClass('loading')) {
    self.addClass('loading');
    setTimeout(function () {
      self.addClass('done');
      setTimeout(function () {
        self.removeClass('loading done');
      }, 1600);
    }, 3200);
  }
});

總結(jié)

本文介紹了一個(gè)CSS實(shí)現(xiàn)的漂亮好看的激活按鈕動畫（Activate Button animation），它適用于一些需要驗(yàn)證的交互網(wǎng)頁里。本實(shí)例需要用到SVG畫布，也需要編寫一點(diǎn)JavaScript程序，但都易理解，不復(fù)雜。喜歡該效果的朋友可以收藏本頁，也可以直接下載源碼備用。

相關(guān)文章

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

標(biāo)簽: button  激活按鈕  動畫按鈕  css