怎么使用純CSS代碼實(shí)現(xiàn)從按鈕兩側(cè)滑入元素的懸停效果

這篇文章主要為大家展示了“怎么使用純CSS代碼實(shí)現(xiàn)從按鈕兩側(cè)滑入元素的懸停效果”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么使用純CSS代碼實(shí)現(xiàn)從按鈕兩側(cè)滑入元素的懸停效果”這篇文章吧。

　　代碼解讀

　　定義dom，容器是一個(gè)無序列表，列表項(xiàng)代表按鈕：

　　<ul>

　　<li>home</li>

　　</ul>

　　居中顯示：

　　body{

　　margin:0;

　　height:100vh;

　　display:flex;

　　align-items:center;

　　justify-content:center;

　　background:linear-gradient(deepskyblue,navy);

　　}

　　去掉列表項(xiàng)前面的符號：

　　ul{

　　padding:0;

　　list-style-type:none;

　　}

　　設(shè)置按鈕的文字樣式：

　　ulli{

　　color:#ddd;

　　font-size:25px;

　　font-family:sans-serif;

　　text-transform:uppercase;

　　}

　　用偽元素在按鈕的左側(cè)增加一個(gè)方塊：

　　ulli{

　　position:relative;

　　}

　　ulli::before{

　　content:'';

　　position:absolute;

　　width:100%;

　　height:100%;

　　background:tomato;

　　left:-100%;

　　}

　　用偽元素在按鈕的右側(cè)增加一條下劃線：

　　ulli::after{

　　content:'';

　　position:absolute;

　　width:100%;

　　height:0.2em;

　　background:tomato;

　　bottom:0;

　　left:100%;

　　}

　　接下來設(shè)置鼠標(biāo)懸停效果。

　　當(dāng)鼠標(biāo)懸停時(shí)，左側(cè)的方塊移到文字所在位置：

　　ulli::before{

　　transition:0.4sease-out;

　　}

　　ulli:hover::before{

　　left:100%;

　　}

　　右側(cè)的下劃線移到文字所在位置，它的動畫時(shí)間延遲到方塊的動畫快結(jié)束時(shí)再開始：

　　ulli::after{

　　transition:0.3s0.3sease-out;

　　}

　　ulli:hover::after{

　　left:0%;

　　}

　　同時(shí)，提高文字的亮度：

　　ulli{

　　transition:0.3s;

　　cursor:pointer;

　　}

　　ulli:hover{

　　color:#fff;

　　}

　　隱藏掉按鈕外的部分，使方塊和下劃線在默認(rèn)狀態(tài)下都不可見，只有鼠標(biāo)懸停時(shí)它們才從兩側(cè)入場：

　　ulli{

　　overflow:hidden;

　　}

　　最后，在dom中再增加幾個(gè)按鈕：

　　<ul>

　　<li>home</li>

　　<li>products</li>

　　<li>services</li>

　　<li>contact</li>

　　</ul>

　　布局多個(gè)按鈕：

　　ul{

　　display:flex;

　　flex-direction:column;

　　align-items:center;

　　}

　　ulli{

　　margin:0.5em;

　　}

以上是“怎么使用純CSS代碼實(shí)現(xiàn)從按鈕兩側(cè)滑入元素的懸停效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！