純CSS怎么實現從按鈕兩側滑入裝飾元素的懸停特效

這篇“純CSS怎么實現從按鈕兩側滑入裝飾元素的懸停特效”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“純CSS怎么實現從按鈕兩側滑入裝飾元素的懸停特效”，給大家總結了以下內容，具有一定借鑒價值，內容詳細步驟清晰，細節處理妥當，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內容吧。

　　代碼解讀

　　定義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;

　　}

　　設置按鈕的文字樣式：

　　ulli{

　　color:#ddd;

　　font-size:25px;

　　font-family:sans-serif;

　　text-transform:uppercase;

　　}

　　用偽元素在按鈕的左側增加一個方塊：

　　ulli{

　　position:relative;

　　}

　　ulli::before{

　　content:'';

　　position:absolute;

　　width:100%;

　　height:100%;

　　background:tomato;

　　left:-100%;

　　}

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

　　ulli::after{

　　content:'';

　　position:absolute;

　　width:100%;

　　height:0.2em;

　　background:tomato;

　　bottom:0;

　　left:100%;

　　}

　　接下來設置鼠標懸停效果。

　　當鼠標懸停時，左側的方塊移到文字所在位置：

　　ulli::before{

　　transition:0.4sease-out;

　　}

　　ulli:hover::before{

　　left:100%;

　　}

　　右側的下劃線移到文字所在位置，它的動畫時間延遲到方塊的動畫快結束時再開始：

　　ulli::after{

　　transition:0.3s0.3sease-out;

　　}

　　ulli:hover::after{

　　left:0%;

　　}

　　同時，提高文字的亮度：

　　ulli{

　　transition:0.3s;

　　cursor:pointer;

　　}

　　ulli:hover{

　　color:#fff;

　　}

　　隱藏掉按鈕外的部分，使方塊和下劃線在默認狀態下都不可見，只有鼠標懸停時它們才從兩側入場：

　　ulli{

　　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;

　　}

　　ulli{

　　margin:0.5em;

　　}

css的基本語法是什么

css的基本語法是：1、css規則由選擇器和一條或多條聲明兩個部分構成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。

感謝您的閱讀，希望您對“純CSS怎么實現從按鈕兩側滑入裝飾元素的懸停特效”這一關鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領會，快去試試吧，如果想閱讀更多相關知識點的文章，歡迎關注億速云行業資訊頻道！