您好,登錄后才能下訂單哦!
小編給大家分享一下怎么使用純CSS實(shí)現(xiàn)切換按鈕時(shí)背景的懸停動(dòng)畫(huà)效果,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
https://github.com/comehope/front-end-daily-challenges
定義 dom,導(dǎo)航中包含一個(gè)無(wú)序列表,列表中有一個(gè)列表項(xiàng):
<nav> <ul> <li>home</li> </ul> </nav>
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: teal; }
隱藏列表項(xiàng)前端的引導(dǎo)符號(hào):
nav ul { padding: 0; list-style-type: none; }
定義按鈕容器尺寸:
:root { font-size: 10px; } nav li { width: 20rem; height: 7rem; }
設(shè)置文字樣式:
nav li { font-size: 20px; text-align: center; line-height: 7rem; font-family: sans-serif; text-transform: uppercase; letter-spacing: 1px; }
用偽元素制作 2 個(gè)背景色塊:
nav li { position: relative; } nav li::before, nav li::after { content: ''; position: absolute; width: inherit; height: inherit; top: 0; left: 0; } nav li::before { background-color: white; z-index: -1; } nav li::after { background-color: goldenrod; z-index: -2; }
讓后面的背景塊向右下偏移,并且讓前面的背景塊投放陰影,增加立體效果:
nav li::before { box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2); } nav li::after { transform: translate(1.5rem, 1.5rem); }
接下來(lái)增加懸停效果。
設(shè)置緩動(dòng)時(shí)間,主元素和偽元素都將有緩動(dòng)效果:
nav li { transition: 0.3s; } nav li::before, nav li::after { transition: 0.3s; }
當(dāng)懸停時(shí),2 個(gè)背景色塊的顏色互換:
nav li:hover::before { background-color: goldenrod; } nav li:hover::after { background-color: white; }
同時(shí),后面的背景色塊的向左上方移動(dòng),按鈕整體則向右下方移動(dòng):
nav li:hover { transform: translate(1.5rem, 1.5rem); } nav li:hover::after { transform: translate(-1.5rem, -1.5rem); }
同時(shí),再讓文本在懸停時(shí)變色:
nav li:hover { color: white; }
再增加幾個(gè)按鈕:
<nav> <ul> <li>home</li> <li>products</li> <li>services</li> <li>contact</li> </ul> </nav>
最后,增加按鈕之間的間距:
nav li { margin: 3rem; }
看完了這篇文章,相信你對(duì)怎么使用純CSS實(shí)現(xiàn)切換按鈕時(shí)背景的懸停動(dòng)畫(huà)效果有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。