來源:匿名 發(fā)布時(shí)間:2018-05-19 16:13:40 閱讀量:5431
最近,我從 Grover網(wǎng)站上發(fā)現(xiàn)以一個(gè)好玩兒的懸停動(dòng)畫,也有了些自己的靈感。這個(gè)動(dòng)畫是將鼠標(biāo)移動(dòng)到訂閱按鈕上移動(dòng)光標(biāo)會(huì)顯示相應(yīng)的彩色漸變。這個(gè)想法很簡單,但是它能使這個(gè)按鈕脫穎而出,人們一下子就注意到它了,增加了點(diǎn)擊的概率。
怎樣才能達(dá)到這個(gè)效果,使我們的網(wǎng)站脫穎而出呢?其實(shí),它并不像你想象的那么難!
我們要做的第一件事就是獲取到鼠標(biāo)的位置。
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`) } |
選擇元素,等待,直到用戶將鼠標(biāo)移過它;
計(jì)算相對(duì)于元素的位置;
將坐標(biāo)存在CSS的變量中。
是的,僅僅9行代碼就讓你能獲知用戶放置鼠標(biāo)的位置,通過這個(gè)信息你能達(dá)到意想不到的效果,但是我們還是先來完成CSS部分的代碼。
我們先將坐標(biāo)存儲(chǔ)在CSS變量中,以便能夠隨時(shí)使用它們。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | .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
,當(dāng)用戶懸停在按鈕上時(shí),將其改為400px
。不要忘了設(shè)置這種轉(zhuǎn)換以使其像風(fēng)一樣