摘要：下面開始編寫動(dòng)畫的特效。視覺上會(huì)有一種彈簧的特效，就像手壓果凍后的效果脈沖特效效果圖原理和代碼首先，還是去掉的默認(rèn)樣式。

本文來自「心譚博客」的《動(dòng)畫設(shè)計(jì)·按鈕特效》，更多文章放在了Github
歡迎交流和Star

滑箱：

果凍：

脈沖：

閃光：

氣泡：

因?yàn)?button 元素可以使用 before/after 偽元素，所以借助偽元素，可以實(shí)現(xiàn)動(dòng)態(tài)圖中的遮蓋層。

為了避免回流重繪，滑箱的運(yùn)動(dòng)方向是垂直方向，所以使用scaleY屬性。對(duì)于動(dòng)畫的方向，需要借助transform-origin改變動(dòng)畫原點(diǎn)。

html：

xin-tan.com

css：

button {
  outline: none;
  border: none;
  z-index: 1;
  position: relative;
  color: white;
  background: #40a9ff;
  padding: 0.5em 1em;
}

button::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fa541c;
  transform-origin: center bottom;
  transform: scaleY(0);
  transition: transform 0.4s ease-in-out;
}

button:hover {
  cursor: pointer;
}

button:hover::before {
  transform-origin: center top;
  transform: scaleY(1);
}

果凍特效可以分割成 5 個(gè)部分，所以無法簡單通過 transition 來實(shí)現(xiàn)，要借助animation。并且動(dòng)畫觸發(fā)的時(shí)間點(diǎn)是鼠標(biāo)移入的時(shí)候，因此 animation 要在:hvoer中聲明。

button {
  z-index: 1;
  color: white;
  background: #40a9ff;
  outline: none;
  border: none;
  padding: 0.5em 1em;
}

button:hover {
  cursor: pointer;
  animation: jelly 0.5s;
}

下面開始編寫 jelly 動(dòng)畫的特效。這個(gè)動(dòng)畫可以分解為 4 個(gè)部分：「初始 => 擠高 => 壓扁 => 回到初始狀態(tài)」。擠高 和 壓扁這里都是通過scale來實(shí)現(xiàn)的，代碼如下：

@keyframes jelly {
  0%,
  100% {
    transform: scale(1, 1);
  }

  33% {
    transform: scale(0.9, 1.1);
  }

  66% {
    transform: scale(1.1, 0.9);
  }
}

上面的動(dòng)態(tài)已經(jīng)仿真不錯(cuò)了，如果將 4 部分變成 5 部分：「初始 => 擠高 => 壓扁 => 擠高 => 回到初始狀態(tài)」。視覺上會(huì)有一種彈簧的特效，就像手壓果凍后的效果：

@keyframes jelly {
  0%,
  100% {
    transform: scale(1, 1);
  }

  25%,
  75% {
    transform: scale(0.9, 1.1);
  }

  50% {
    transform: scale(1.1, 0.9);
  }
}

首先，還是去掉 button 的默認(rèn)樣式。注意設(shè)置 button 的z-index屬性并且讓其生效，要保證其大于 ::before 的 z-index 屬性，防止 dom 元素被偽元素覆蓋。

button {
  position: relative;
  z-index: 1;
  border: none;
  outline: none;
  padding: 0.5em 1em;
  color: white;
  background-color: #1890ff;
}

button:hover {
  cursor: pointer;
}

剩下的就是設(shè)置偽元素。因?yàn)槊}沖特效給人的感覺是“鏤空”放大。因此，變化對(duì)象是 border 屬性。而鏤空的效果，是通過透明背景來實(shí)現(xiàn)的。

button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 4px solid #1890ff;
  transform: scale(1);
  transform-origin: center;
}

動(dòng)畫啟動(dòng)時(shí)間是鼠標(biāo)移入，border 上變化的是顏色變淡和大小變小，透明度也逐漸變成 0。

button:hover::before {
  transition: all 0.75s ease-out;
  border: 1px solid#e6f7ff;
  transform: scale(1.25);
  opacity: 0;
}

?? transition 和 transform 是放在hover狀態(tài)下的偽元素，目的是讓動(dòng)畫瞬間回到初始狀態(tài)。

實(shí)現(xiàn)上依然是借助偽元素，閃光特效更多注重的是配色，動(dòng)畫方面實(shí)現(xiàn)的核心是利用rotate來實(shí)現(xiàn)「傾斜」的效果，利用translate3d來實(shí)現(xiàn)「閃動(dòng)」的效果。

button {
  outline: none;
  border: none;
  z-index: 1;
  position: relative;
  color: white;
  background: #262626;
  padding: 0.5em 1em;
  overflow: hidden;
  --shine-width: 1.25em;
}

button::after {
  content: "";
  z-index: -1;
  position: absolute;
  background: #595959;
  /* 核心代碼：位置一步步調(diào)整 */
  top: -50%;
  left: 0%;
  bottom: -50%;
  width: 1.25em;
  transform: translate3d(-200%, 0, 0) rotate(35deg);
  /*  */
}

button:hover {
  cursor: pointer;
}

button:hover::after {
  transition: transform 0.5s ease-in-out;
  transform: translate3d(500%, 0, 0) rotate(35deg);
}

??translate3d除了避免重繪回流，還能啟用 GPU 加速，性能更高。但之前為了方便講述，一般使用的是translate屬性。

首先，還是禁用 button 元素的默認(rèn)樣式，并且調(diào)整一下配色：

button {
  outline: none;
  border: none;
  cursor: pointer;
  color: white;
  position: relative;
  padding: 0.5em 1em;
  background-color: #40a9ff;
}

由于 button 的偽元素層級(jí)是覆蓋 button 的，所以要設(shè)置 z-index 屬性，防止偽元素遮蓋顯示。畢竟只想要背景色的遮蓋，字體不需要遮蓋。在上面的樣式中添加：

button {
  z-index: 1;
  overflow: hidden;
}

最后處理的是偽元素的變化效果。特效是從中心向四周蔓延，所以應(yīng)該讓其居中。

對(duì)于大小變化，還是利用scale屬性。

因?yàn)槭菆A形，所以將border-radius設(shè)置為 50%即可。

button::before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #9254de;
  transform-origin: center;
  transform: translate3d(-50%, -50%, 0) scale(0, 0);
  transition: transform 0.45s ease-in-out;
}

button:hover::before {
  transform: translate3d(-50%, -50%, 0) scale(15, 15);
}

示例代碼中的氣泡特效是從中間向四周擴(kuò)散，如果想要從左上角向右下角擴(kuò)散呢？例如下圖所示：

處理過程很簡單，只需要改變一下氣泡的初始位置即可。

button::before {
  z-index: -1;
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #9254de;
  /* 變化位置的代碼 */
  top: 0;
  left: 0;
  transform-origin: center;
  transform: scale3d(0, 0, 0);
  transition: transform 0.45s ease-in-out;
  /* *********** */
}

button:hover::before {
  transform: scale3d(15, 15, 15);
}

《transform-origin: 改變動(dòng)畫原點(diǎn)》

《Increase Your Site’s Performance with Hardware-Accelerated CSS》

《css3 變量》

動(dòng)畫設(shè)計(jì)·字體特效

動(dòng)畫設(shè)計(jì)·輸入框特效

動(dòng)畫設(shè)計(jì)·按鈕特效

動(dòng)畫設(shè)計(jì)·Loader特效·基礎(chǔ)篇

動(dòng)畫設(shè)計(jì)·Loader特效·進(jìn)階篇