<var id="7zf1j"><font id="7zf1j"></font></var>

          <sub id="7zf1j"></sub>

            利用 CSS 變量實現令人震驚的懸浮效果

            來源:匿名 發布時間:2018-05-19 16:13:40 閱讀量:3917

            原文出處:Tobias Reich   譯文出處:眾成翻譯 - meakaka   

            最近,我從 Grover網站上發現以一個好玩兒的懸停動畫,也有了些自己的靈感。這個動畫是將鼠標移動到訂閱按鈕上移動光標會顯示相應的彩色漸變。這個想法很簡單,但是它能使這個按鈕脫穎而出,人們一下子就注意到它了,增加了點擊的概率。

            怎樣才能達到這個效果,使我們的網站脫穎而出呢?其實,它并不像你想象的那么難!

            追蹤位置

            我們要做的第一件事就是獲取到鼠標的位置。

            1
            2
            3
            4
            5
            6
            7
            8
            9
            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的變量中。

            是的,僅僅9行代碼就讓你能獲知用戶放置鼠標的位置,通過這個信息你能達到意想不到的效果,但是我們還是先來完成CSS部分的代碼。

            動畫漸變

            我們先將坐標存儲在CSS變量中,以便能夠隨時使用它們。

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

            2. 將 widthheight初始化為0px,當用戶懸停在按鈕上時,將其改為400px。不要忘了設置這種轉換以使其像風一樣

            標簽: 設計 HTML
            分享:
            評論:
            你還沒有登錄,請先
            2019年92午夜视频福利_五月丁香久久综合网站_三级网站视频在在线播放_日本漫画全彩3d口工漫

                  <var id="7zf1j"><font id="7zf1j"></font></var>

                    <sub id="7zf1j"></sub>