這篇文章帶給大家的內容是關於如何使用純CSS實現按鈕的懸停效果(附源碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
https://github.com/comehope/front- end-daily-challenges
定義dom,容器是一個無序列表,包含4 個元素,代表4 個按鈕:
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: cornsilk; }
去掉清單項目前面的符號:
ul { padding: 0; list-style-type: none; }
設定按鈕的邊框和背景的樣式,背景採用漸變色,但漸變的方向依序交替:
ul li { box-sizing: border-box; width: 15em; height: 3em; font-size: 20px; border-radius: 0.5em; margin: 0.5em; box-shadow: 0 0 1em rgba(0,0,0,0.2); } ul li:nth-child(odd) { background: linear-gradient(to right, orange, tomato); } ul li:nth-child(even) { background: linear-gradient(to left, orange, tomato); }
設定按鈕上方文字的樣式,依序交替居左或居右:
ul li { color: white; font-family: sans-serif; text-transform: capitalize; line-height: 3em; } ul li:nth-child(odd) { text-align: left; padding-left: 10%; } ul li:nth-child(even) { text-align: right; padding-right: 10%; }
設定按鈕的透視效果,依序交替向左旋轉和向右旋轉,此時透視的距離是500px
,注意perspective() 函數和 rotateY() 函數的順序不能寫反:
ul li:nth-child(odd) { transform: perspective(500px) rotateY(45deg); } ul li:nth-child(even) { transform: perspective(500px) rotateY(-45deg); }
為按鈕增加懸停效果,使懸停時的透視距離變短為200px
,透視距離越短,旋轉的幅度看起來就越大:
ul li:nth-child(odd):hover { transform: perspective(200px) rotateY(45deg); padding-left: 5%; } ul li:nth-child(even):hover { transform: perspective(200px) rotateY(-45deg); padding-right: 5%; }
最後,設定一個緩動時間,讓效果轉換變得平滑:
ul li { transition: 0.3s; cursor: pointer; }
大功告成!
#以上是如何使用純CSS實現按鈕的懸停效果(附源碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!