无码人妻熟妇久久久久,中文字幕人妻伦伦又色又爽,偷看亚洲韩视频

技術(shù)頻道 - html技術(shù)

CSS實現(xiàn)漂亮的激活按鈕動畫(Activate Button animation)

作者:admin 時間:2023-4-7 15:15:48 瀏覽:

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

效果如圖

CSS漂亮好看的激活按鈕動畫

demo download

實例介紹

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

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

HTML代碼

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

span標(biāo)簽里含有3個svg畫布，ul標(biāo)簽里是3個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;
}

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

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

JavaScript

本實例需要用到一點JavaScript編程，它的作用是觸發(fā)并自動完成4個激活過程（觸發(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é)

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

相關(guān)文章