原文：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

image

是它能使這個按鈕脫穎而出，人們一下子就注意到它了，增加了點擊的概率。

怎樣才能達(dá)到這個效果删窒，使我們的網(wǎng)站脫穎而出呢？其實顺囊，它并不像你想象的那么難肌索！

追蹤位置

我們要做的第一件事就是獲取到鼠標(biāo)的位置。

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

1. document.querySelector('.button').onmousemove = (e) => {

2. const x = e.pageX - e.target.offsetLeft

3. const y = e.pageY - e.target.offsetTop

4. e.target.style.setProperty('--x',${ x }px)

5. e.target.style.setProperty('--y',${ y }px)

6. }

</pre>

1. 選擇元素特碳，等待诚亚，直到用戶將鼠標(biāo)移過它

2. 計算相對于元素的位置

3. 將坐標(biāo)存在 CSS 的變量中

是的，僅僅 9 行代碼就讓你能獲知用戶放置鼠標(biāo)的位置午乓，通過這個信息你能達(dá)到意想不到的效果站宗，但是我們還是先來完成 CSS 部分的代碼。

動畫漸變

我們先將坐標(biāo)存儲在 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;">

1. .button {

2. position: relative;

3. appearance: none;

4. background: #f72359;

5. padding: 1em 2em;

6. border: none;

7. color: white;

8. font-size: 1.2em;

9. cursor: pointer;

10. outline: none;

11. overflow: hidden;

12. border-radius: 100px;

13. span {

14. position: relative;

15. }

16. &::before {

17. --size: 0;

18. content: '';

19. position: absolute;

20. left: var(--x);

21. top: var(--y);

22. width: var(--size);

23. height: var(--size);

24. background: radial-gradient(circle closest-side, #4405f7, transparent);

25. transform: translate(-50%, -50%);

26. transition: width .2s ease, height .2s ease;

27. }

28. &:hover::before {

29. --size: 400px;

30. }

31. }

</pre>

1. 用 span包裹文本，以避免顯示在按鈕的上方

2. 將 width和 height初始化為 0px，當(dāng)用戶懸停在按鈕上時敏释，將其改為 400px库快。不要忘了設(shè)置這種轉(zhuǎn)換以使其像風(fēng)一樣??瞬間出現(xiàn)

3. 利用坐標(biāo)追蹤鼠標(biāo)位置

4. 在 background 屬性上應(yīng)用 radial-gradient，使用 closest-side circle颂暇。Closest-side 能夠覆蓋整個面

結(jié)果

成功啦缺谴！將其加入到對于的 HTML 頁面但惶，你炫酷的按鈕就可以使用啦耳鸯！

其他嘗試

通過收集鼠標(biāo)的位置并對其有相應(yīng)的響應(yīng)就能實現(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)動畫效果添谊，實際上的性能極差财喳，您應(yīng)該盡可能嘗試用 transform去實現(xiàn)。那我為什么仍然堅持呢斩狱？原因就在于當(dāng)瀏覽器在加速圖層中呈現(xiàn)元素時（即轉(zhuǎn)換）耳高，如果按鈕具有非矩形邊緣時，該圖層可能會出現(xiàn)意想不到的 bug所踊。

編者有話說: 誠然泌枪，有很多方式去使用 transform，但是一些瀏覽器并不喜歡它秕岛。不通過 transform去實現(xiàn)轉(zhuǎn)換功能也許是個不錯的解決問題的方法碌燕。這兒還有名為 解決 Safari 的方法 的網(wǎng)站也許可以解決這個問題。

image

為什么改變 top 和 left 屬性的值而不使用 transform: translate() ?

參見上面的解釋??