您好,登錄后才能下訂單哦!
這篇文章主要介紹了怎么使用純CSS實現(xiàn)從按鈕兩側(cè)滑入元素的懸停效果,具有一定借鑒價值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
https://github.com/comehope/front-end-daily-challenges
定義 dom,容器是一個無序列表,列表項代表按鈕:
<ul> <li>home</li> </ul>
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(deepskyblue, navy); }
去掉列表項前面的符號:
ul { padding: 0; list-style-type: none; }
設(shè)置按鈕的文字樣式:
ul li { color: #ddd; font-size: 25px; font-family: sans-serif; text-transform: uppercase; }
用偽元素在按鈕的左側(cè)增加一個方塊:
ul li { position: relative; } ul li::before { content: ''; position: absolute; width: 100%; height: 100%; background: tomato; left: -100%; }
用偽元素在按鈕的右側(cè)增加一條下劃線:
ul li::after { content: ''; position: absolute; width: 100%; height: 0.2em; background: tomato; bottom: 0; left: 100%; }
接下來設(shè)置鼠標(biāo)懸停效果。
當(dāng)鼠標(biāo)懸停時,左側(cè)的方塊移到文字所在位置:
ul li::before { transition: 0.4s ease-out; } ul li:hover::before { left: 100%; }
右側(cè)的下劃線移到文字所在位置,它的動畫時間延遲到方塊的動畫快結(jié)束時再開始:
ul li::after { transition: 0.3s 0.3s ease-out; } ul li:hover::after { left: 0%; }
同時,提高文字的亮度:
ul li { transition: 0.3s; cursor: pointer; } ul li:hover { color: #fff; }
隱藏掉按鈕外的部分,使方塊和下劃線在默認(rèn)狀態(tài)下都不可見,只有鼠標(biāo)懸停時它們才從兩側(cè)入場:
ul li { overflow: hidden; }
最后,在 dom 中再增加幾個按鈕:
<ul> <li>home</li> <li>products</li> <li>services</li> <li>contact</li> </ul>
布局多個按鈕:
ul { display: flex; flex-direction: column; align-items: center; } ul li { margin: 0.5em; }
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享怎么使用純CSS實現(xiàn)從按鈕兩側(cè)滑入元素的懸停效果內(nèi)容對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問題就找億速云,詳細(xì)的解決方法等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。