效果預(yù)覽

在線演示

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。

https://codepen.io/comehope/pen/yRyOZr

可交互視頻

此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

請(qǐng)用 chrome, safari, edge 打開觀看。

https://scrimba.com/p/pEgDAM/cmWMQtz

源代碼下載

本地下載

每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載：

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 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)前面的符號(hào)：

ul {padding: 0;list-style-type: none; }

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

ul li {color: #ddd;font-size: 25px;font-family: sans-serif;text-transform: uppercase; }

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

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)懸停時(shí)，左側(cè)的方塊移到文字所在位置：

ul li::before {transition: 0.4s ease-out; }ul li:hover::before {left: 100%; }

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

ul li::after {transition: 0.3s 0.3s ease-out; }ul li:hover::after {left: 0%; }

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

ul li {transition: 0.3s;cursor: pointer; }ul li:hover {color: #fff; }

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

ul li {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; }ul li {margin: 0.5em; }

大功告成！

原文地址：https://segmentfault.com/a/1190000016561226

總結(jié)

以上是生活随笔為你收集整理的如何用纯 CSS 创作从按钮两侧滑入装饰元素的悬停特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。