原文： Stunning hover effects with CSS variables

我的博客：[譯] CSS 變量實(shí)現(xiàn)炫酷鼠標(biāo)懸浮效果

我最近從Grover網(wǎng)站上的有趣的懸停動(dòng)畫(huà)中獲得靈感。將鼠標(biāo)移動(dòng)到訂閱按鈕上可以顯示光標(biāo)移動(dòng)后的彩色漸變。這個(gè)想法很簡(jiǎn)單，但結(jié)果是一個(gè)按鈕從復(fù)位和等待點(diǎn)擊中脫穎而出。

那怎樣實(shí)現(xiàn)類(lèi)似的效果使我們的網(wǎng)站同樣出色呢？很好，它并沒(méi)有你想象的那么困難！

跟蹤位置

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

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`) } 復(fù)制代碼

選中目標(biāo)元素并監(jiān)聽(tīng)用戶鼠標(biāo)劃過(guò)的事件

計(jì)算鼠標(biāo)相對(duì)于該元素的坐標(biāo)

將坐標(biāo)保存到 CSS 的變量中

是的，只需要 6 行代碼就可以讓你的 CSS 知道用戶鼠標(biāo)的位置。通過(guò)這些信息你可以實(shí)現(xiàn)更多更龐大的效果。但是讓我們先實(shí)現(xiàn) CSS 部分……

為漸變?cè)O(shè)置動(dòng)畫(huà)效果

我們已經(jīng)將鼠標(biāo)坐標(biāo)存儲(chǔ)在 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;} } 復(fù)制代碼

將文本包裹在一個(gè) span 中，防止?jié)u變層覆蓋到文字上方

初始 width 和 height 為 0px 并且當(dāng)鼠標(biāo)懸浮在按鈕上時(shí)將它們?cè)黾拥?400px 。不要忘記設(shè)置 transition 讓它有個(gè)漸入的效果

使用 JS 中設(shè)置坐標(biāo)跟隨鼠標(biāo)

應(yīng)用一個(gè) radial-gradient 到 background 上并使用 closest-side circle 。 closest-side 使得 background 充滿整個(gè) before 但又沒(méi)有超出它。

效果

就這樣，添加缺少的 HTML 就可以了：

<button class="button"><span>Hover me I'm awesome</span> </button> 復(fù)制代碼

在線預(yù)覽

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

拓展

只需對(duì)鼠標(biāo)的位置作出反應(yīng)，即可建立如此多的效果。它非常華麗并且使得?互動(dòng)如此有趣。

以下是我在basicScroll的網(wǎng)站上使用的類(lèi)似動(dòng)畫(huà)：

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

—@electerious

或者看中并建立一個(gè) 3D 視差按鈕：

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

—@electerious

可能性是無(wú)止境的。你可以在下方評(píng)論區(qū)分享你使用它創(chuàng)建的效果?。

Q&A

Q： 為什么使用 width 和 height 而不是使用 transform: scale() 實(shí)現(xiàn)動(dòng)畫(huà)呢？

A： 對(duì)于動(dòng)畫(huà)的性能， width 和 height 是不好的，你可能會(huì)盡量地嘗試使用 transform 。你為什么我不這樣做呢？問(wèn)題在于瀏覽器在加速圖層中呈現(xiàn)元素（正在轉(zhuǎn)換）。當(dāng)按鈕具有非矩形邊緣時(shí)，此圖層可能會(huì)導(dǎo)致問(wèn)題。

Q： 為什么改變 top 和 left 而不是 transform: translate() 呢？

A： 參照上條。

Q： 我可以在 Twitter 關(guān)注你嗎？

A： 當(dāng)然。（原作者推特 @electerious）

轉(zhuǎn)載于:https://juejin.im/post/5a924fcaf265da4e7d6061a6

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。