[譯] CSS 變量實現炫酷鼠標懸浮效果

原文： Stunning hover effects with CSS variables

個人博客：[譯] CSS 變量實現炫酷鼠標懸浮效果

我最近從Grover網站上的有趣的懸停動畫中得到靈感。將鼠標移動到訂閱按鈕上能夠顯示光標移動後的彩色漸變。這個想法很簡單，但結果是一個按鈕從復位和等待點擊中脫穎而出。

那怎樣實現相似的效果使咱們的網站一樣出色呢？很好，它並無你想象的那麼困難！

跟蹤位置

咱們須要作的第一件事即是跟蹤鼠標光標的位置。

document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop
  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)
}
複製代碼

1. 選中目標元素並監聽用戶鼠標劃過的事件
2. 計算鼠標相對於該元素的座標
3. 將座標保存到 CSS 的變量中

是的，只須要 6 行代碼就可讓你的 CSS 知道用戶鼠標的位置。經過這些信息你能夠實現更多更龐大的效果。可是讓咱們先實現 CSS 部分……

爲漸變設置動畫效果

咱們已經將鼠標座標存儲在 CSS 變量中，因此能夠在 CSS 中的任何地方使用它們。（如下爲 SCSS 代碼）

.button {
  position: relative;
  appearance: none;
  background: #f72359;
  padding: 1em 2em;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 100px;

  span {
    position: relative;
  }

  &::before {
    --size: 0;
    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
  }

  &:hover::before {
    --size: 400px;
  }
}
複製代碼

1. 將文本包裹在一個 span 中，防止漸變層覆蓋到文字上方
2. 初始 width 和 height 爲 0px 而且當鼠標懸浮在按鈕上時將它們增長到 400px 。不要忘記設置 transition 讓它有個漸入的效果
3. 使用 JS 中設置座標跟隨鼠標
4. 應用一個 radial-gradient 到 background 上並使用 closest-side circle 。 closest-side 使得 background 充滿整個 before 但又沒有超出它。

效果

就這樣，添加缺乏的 HTML 就能夠了：

<button class="button">
	<span>Hover me I'm awesome</span>
</button>
複製代碼

在線預覽

See the Pen Mouse movement button with border-radius by Tobias Reich (@electerious) on CodePen.

拓展

只需對鼠標的位置做出反應，便可創建如此多的效果。它很是華麗而且使得👌互動如此有趣。

如下是我在basicScroll的網站上使用的相似動畫：

May the hover be with you https://t.co/2jrmVorLRW

—@electerious

或者看中並創建一個 3D 視差按鈕：

3D parallax button with JS controlled CSS variables @CodePen 🎉 https://t.co/qE0woiNip8 https://t.co/Wyi0xjRzPq

—@electerious

可能性是無止境的。你能夠在下方評論區分享你使用它建立的效果👇。

Q&A

Q： 爲何使用 width 和 height 而不是使用 transform: scale() 實現動畫呢？

A： 對於動畫的性能， width 和 height 是很差的，你可能會盡可能地嘗試使用 transform 。你爲何我不這樣作呢？問題在於瀏覽器在加速圖層中呈現元素（正在轉換）。當按鈕具備非矩形邊緣時，此圖層可能會致使問題。

Q： 爲何改變 top 和 left 而不是 transform: translate() 呢？

A： 參照上條。

Q： 我能夠在 Twitter 關注你嗎？

A： 固然。（原做者推特 @electerious）