原文： Stunning hover effects with CSS variables

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

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

那怎樣實現類似的效果使我們的網站同樣出色呢？很好，它并沒有你想象的那么困難！

跟蹤位置

我們需要做的第一件事便是跟蹤鼠標光標的位置。

document.querySelector('.button').onmousemove = (e) => {const x = e.pageX - e.target.offsetLeftconst y = e.pageY - e.target.offsetTope.target.style.setProperty('--x', `${ x }px`)e.target.style.setProperty('--y', `${ y }px`) } 復制代碼

選中目標元素并監聽用戶鼠標劃過的事件

計算鼠標相對于該元素的坐標

將坐標保存到 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;} } 復制代碼

將文本包裹在一個 span 中，防止漸變層覆蓋到文字上方

初始 width 和 height 為 0px 并且當鼠標懸浮在按鈕上時將它們增加到 400px 。不要忘記設置 transition 讓它有個漸入的效果

使用 JS 中設置坐標跟隨鼠標

應用一個 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）

轉載于:https://juejin.im/post/5a924fcaf265da4e7d6061a6

總結

以上是生活随笔為你收集整理的[译] CSS 变量实现炫酷鼠标悬浮效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。