最近，我從 Grover 網(wǎng)站上發(fā)現(xiàn)以一個好玩兒的懸停動畫，也有了些自己的靈感。這個動畫是將鼠標移動到訂閱按鈕上移動光標會顯示相應的彩色漸變。這個想法很簡單，但原文：https://blog.prototypr.io/stunning-hover-effects-with-css-variables-f855e7b95330 作者：Tobias Reich
譯文：https://www.zcfy.cc/article/stunning-hover-effects-with-css-variables# 譯者：meakaka
是它能使這個按鈕脫穎而出，人們一下子就注意到它了，增加了點擊的概率。
怎樣才能達到這個效果，使我們的網(wǎng)站脫穎而出呢？其實，它并不像你想象的那么難！
追蹤位置
我們要做的第一件事就是獲取到鼠標的位置。
<pre class="" style="margin: 0px 0px 15px; padding: 15px 5px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word; background-color: rgb(246, 248, 250); font-size: 13px; line-height: 1.5; overflow: auto; border-radius: 3px;">
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)}
</pre>
選擇元素，等待，直到用戶將鼠標移過它
計算相對于元素的位置
將坐標存在 CSS 的變量中
是的，僅僅 9 行代碼就讓你能獲知用戶放置鼠標的位置，通過這個信息你能達到意想不到的效果，但是我們還是先來完成 CSS 部分的代碼。
動畫漸變
我們先將坐標存儲在 CSS 變量中，以便能夠隨時使用它們。
<pre class="" style="margin: 0px 0px 15px; padding: 15px 5px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word; background-color: rgb(246, 248, 250); font-size: 13px; line-height: 1.5; overflow: auto; border-radius: 3px;">
.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;}}
</pre>
用
span包裹文本，以避免顯示在按鈕的上方將
width和height初始化為0px，當用戶懸停在按鈕上時，將其改為400px。不要忘了設置這種轉換以使其像風一樣??瞬間出現(xiàn)利用坐標追蹤鼠標位置
在
background屬性上應用radial-gradient，使用 closest-side circle。Closest-side 能夠覆蓋整個面
結果
成功啦！將其加入到對于的 HTML 頁面，你炫酷的按鈕就可以使用啦！
其他嘗試
通過收集鼠標的位置并對其有相應的響應就能實現(xiàn)這么贊的效果。太棒了，在這個動手過程中我收獲很多樂趣 ??
這是我在名為 basicScroll 的網(wǎng)站做的其他的類似的動畫:
<iframe frameborder="0" width="677" height="380.8125" allow="autoplay; fullscreen" allowfullscreen="true" src="https://v.qq.com/txp/iframe/player.html?origin=https%3A%2F%2Fmp.weixin.qq.com&vid=a1343d3zfzh&autoplay=false&full=true&show1080p=false" style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"></iframe>
花哨些，做了個 3D 效果的按鈕:
<iframe frameborder="0" width="677" height="380.8125" allow="autoplay; fullscreen" allowfullscreen="true" src="https://v.qq.com/txp/iframe/player.html?origin=https%3A%2F%2Fmp.weixin.qq.com&vid=d1343kigg1x&autoplay=false&full=true&show1080p=false" style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"></iframe>
可能的嘗試是各種各樣的，讓我們從下面的評論中看看你們都做了什么嘗試??
問與答
為什么要用* width* 和 height代替 transform: scale()去制造動畫效果?
通過調(diào)整 width 和 height值以實現(xiàn)動畫效果，實際上的性能極差，您應該盡可能嘗試用 transform去實現(xiàn)。那我為什么仍然堅持呢？原因就在于當瀏覽器在加速圖層中呈現(xiàn)元素時（即轉換），如果按鈕具有非矩形邊緣時，該圖層可能會出現(xiàn)意想不到的 bug。
編者有話說: 誠然，有很多方式去使用 transform，但是一些瀏覽器并不喜歡它。不通過 transform去實現(xiàn)轉換功能也許是個不錯的解決問題的方法。這兒還有名為 解決 Safari 的方法 的網(wǎng)站也許可以解決這個問題。
為什么改變 top 和 left 屬性的值而不使用 transform: translate() ?
參見上面的解釋??
