1. 程式人生 > >web前端動畫專題(3):撩人的按鈕特效

web前端動畫專題(3):撩人的按鈕特效

特效一覽

滑箱

果凍

脈衝

閃光

氣泡

滑箱特效

效果圖

原理

因為 button 元素可以使用 before/after 偽元素,所以藉助偽元素,可以實現動態圖中的遮蓋層。

為了避免迴流重繪,滑箱的運動方向是垂直方向,所以使用scaleY屬性。對於動畫的方向,需要藉助transform-origin改變動畫原點。

程式碼實現

html:

<button>xin-tan.com</button>

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);
}
web前端開發學習Q-q-u-n: 784783012 ,分享開發工具,零基礎,進階視訊教程,希望新手少走彎路

果凍特效

效果圖

原理和程式碼

果凍特效可以分割成 5 個部分,所以無法簡單通過 transition 來實現,要藉助animation。並且動畫觸發的時間點是滑鼠移入的時候,因此 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;
}
web前端開發學習Q-q-u-n: 784783012 ,分享開發工具,零基礎,進階視訊教程,希望新手少走彎路

下面開始編寫 jelly 動畫的特效。這個動畫可以分解為 4 個部分:「初始 => 擠高 => 壓扁 => 回到初始狀態」。擠高 和 壓扁這裡都是通過scale來實現的,程式碼如下:

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

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

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

更進一步

上面的動態已經模擬不錯了,如果將 4 部分變成 5 部分:「初始 => 擠高 => 壓扁 => 擠高 => 回到初始狀態」。視覺上會有一種彈簧的特效

,就像手壓果凍後的效果:

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

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

  50% {
    transform: scale(1.1, 0.9);
  }
}
web前端開發學習Q-q-u-n: 784783012 ,分享開發工具,零基礎,進階視訊教程,希望新手少走彎路

脈衝特效

效果圖

原理和程式碼

首先,還是去掉 button 的預設樣式。注意設定 button 的z-index屬性並且讓其生效,要保證其大於 ::beforez-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;
}

剩下的就是設定偽元素。因為脈衝特效給人的感覺是“鏤空”放大。因此,變化物件是 border 屬性。而鏤空的效果,是通過透明背景來實現的。

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

動畫啟動時間是滑鼠移入,border 上變化的是顏色變淡和大小變小,透明度也逐漸變成 0。

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

⚠️ transition 和 transform 是放在hover狀態下的偽元素,目的是讓動畫瞬間回到初始狀態。

閃光特效

效果圖

原理和程式碼

實現上依然是藉助偽元素,閃光特效更多注重的是配色,動畫方面實現的核心是利用rotate來實現「傾斜」的效果,利用translate3d來實現「閃動」的效果。

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;
  /* 核心程式碼:位置一步步調整 */
  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);
}
web前端開發學習Q-q-u-n: 784783012 ,分享開發工具,零基礎,進階視訊教程,希望新手少走彎路

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

氣泡特效

效果圖

原理和程式碼

首先,還是禁用 button 元素的預設樣式,並且調整一下配色:

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

由於 button 的偽元素層級是覆蓋 button 的,所以要設定 z-index 屬性,防止偽元素遮蓋顯示。畢竟只想要背景色的遮蓋,字型不需要遮蓋。在上面的樣式中新增:

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

最後處理的是偽元素的變化效果。特效是從中心向四周蔓延,所以應該讓其居中。

對於大小變化,還是利用scale屬性。

因為是圓形,所以將border-radius設定為 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);
}

換個方向?

示例程式碼中的氣泡特效是從中間向四周擴散,如果想要從左上角向右下角擴散呢?例如下圖所示:

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

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);
}
web前端開發學習Q-q-u-n: 784783012 ,分享開發工具,零基礎,進階視訊教程,希望新手