如何使用純CSS實現小球變矩形背景的按鈕懸停效果（附源碼）

本篇文章給大家帶來的內容是關於如何使用純CSS實現小球變矩形背景的按鈕懸停效果（附源碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

效果預覽

原始碼下載

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

代碼解讀

定義 dom，導航中包含一個無序列表，列表中有一個清單項目：

<nav>    <ul>        <li>home</li>    </ul></nav>

置中顯示：

body {    margin: 0;    height: 100vh;    display: flex;    align-items: center;    justify-content: center;    background-color: lightyellow;}

隱藏清單項目前端的引導符號：

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

設定容器尺寸：

nav li {    width: 8em;    height: 2em;    font-size: 25px;}

設定文字樣式：

nav li {    font-size: 25px;    text-align: center;    line-height: 2em;    font-family: sans-serif;    text-transform: capitalize;}

添加虛擬元素，虛擬元素是 2 個小球：

nav li {    position: relative;}nav li::before,nav li::after {    content: '';    position: absolute;    width: 0.6em;    height: 0.6em;    background-color: gainsboro;    border-radius: 50%;}

把小球定位在左右兩端：

nav li::before {    top: calc(50% - 0.6em / 2);    left: 0;}nav li::after {    bottom: calc(50% - 0.6em / 2);    right: 0;}

接下來設定按鈕懸停效果。

當滑鼠移至上方在按鈕上時，讓小球變為與容器大小相等的矩形：

nav li:hover::before,nav li:hover::after {    width: 100%;    height: 100%;    border-radius: 0;}

第其中一個矩形稍向右下角錯位，並且加深它的顏色，形成陰影製作效果：

nav li:hover::before {    z-index: -1;    top: 0;}nav li:hover::after {    z-index: -2;    bottom: -0.4em;    right: -0.4em;    filter: brightness(0.8);}

設定懸停的顏色，虛擬元素的矩形背景變為藍色，文字變為白色：

nav li:hover {    color: white;}nav li:hover::before,nav li:hover::after {    background-color: dodgerblue;}

設定緩動時間，其中虛擬元素的緩動時間函數用擬人的動畫效果：

nav li {    transition: 0.5s;}nav li::before,nav li::after {    transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);}

再增加幾個按鈕：

<nav>    <ul>        <li>home</li>        <li>products</li>        <li>services</li>        <li>contact</li>    </ul></nav>

最後，增加按鈕之間的間距：

nav li {    margin: 0.8em;}

大功告成！