小編給大家分享一下如何使用CSS變量實(shí)現(xiàn)炫酷驚人的懸浮效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
目前成都創(chuàng)新互聯(lián)公司已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、康保網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
最近，我從 Grover網(wǎng)站上發(fā)現(xiàn)以一個(gè)好玩兒的懸停動(dòng)畫(huà)，也有了些自己的靈感。這個(gè)動(dòng)畫(huà)是將鼠標(biāo)移動(dòng)到訂閱按鈕上移動(dòng)光標(biāo)會(huì)顯示相應(yīng)的彩色漸變。這個(gè)想法很簡(jiǎn)單，但是它能使這個(gè)按鈕脫穎而出，人們一下子就注意到它了，增加了點(diǎn)擊的概率。
怎樣才能達(dá)到這個(gè)效果，使我們的網(wǎng)站脫穎而出呢？其實(shí)，它并不像你想象的那么難！
追蹤位置
我們要做的第一件事就是獲取到鼠標(biāo)的位置。
重慶分公司
重慶分公司
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)移過(guò)它；
計(jì)算相對(duì)于元素的位置；
將坐標(biāo)存在CSS的變量中。
是的，僅僅9行代碼就讓你能獲知用戶放置鼠標(biāo)的位置，通過(guò)這個(gè)信息你能達(dá)到意想不到的效果，但是我們還是先來(lái)完成CSS部分的代碼。
動(dòng)畫(huà)漸變
我們先將坐標(biāo)存儲(chǔ)在CSS變量中，以便能夠隨時(shí)使用它們。
.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)一樣:dash:瞬間出現(xiàn)；
利用坐標(biāo)追蹤鼠標(biāo)位置；
在background 屬性上應(yīng)用 radial-gradient，使用closest-side circle。Closest-side能夠覆蓋整個(gè)面。
看完了這篇文章，相信你對(duì)“如何使用CSS變量實(shí)現(xiàn)炫酷驚人的懸浮效果”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
