這篇文章帶給大家的內容是關於如何使用純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; }
大功告成!
相關推薦:
以上是如何使用純CSS實現小球變矩形背景的按鈕懸停效果(附源碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!