這篇文章主要為大家展示了純CSS怎么實(shí)現(xiàn)按鈕的懸停效果，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“純CSS怎么實(shí)現(xiàn)按鈕的懸停效果”這篇文章吧。
創(chuàng)新互聯(lián)公司主要從事成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)泰山,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108
代碼解讀
定義dom，容器是一個(gè)無序列表，包含4個(gè)元素，代表4個(gè)按鈕：
居中顯示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:cornsilk;
}
去掉列表項(xiàng)前面的符號(hào)：
ul{
padding:0;
list-style-type:none;
}
設(shè)置按鈕的邊框和背景的樣式，背景采用漸變色，但漸變的方向依次交替：
ulli{
box-sizing:border-box;
width:15em;
height:3em;
font-size:20px;
border-radius:0.5em;
margin:0.5em;
box-shadow:001emrgba(0,0,0,0.2);
}
ulli:nth-child(odd){
background:linear-gradient(toright,orange,tomato);
}
ulli:nth-child(even){
background:linear-gradient(toleft,orange,tomato);
}
設(shè)置按鈕上文字的樣式，依次交替居左或居右：
ulli{
color:white;
font-family:sans-serif;
text-transform:capitalize;
line-height:3em;
}
ulli:nth-child(odd){
text-align:left;
padding-left:10%;
}
ulli:nth-child(even){
text-align:right;
padding-right:10%;
}
設(shè)置按鈕的透視效果，依次交替向左旋轉(zhuǎn)和向右旋轉(zhuǎn)，此時(shí)透視的距離是500px，注意perspective()函數(shù)和rotateY()函數(shù)的順序不能寫反：
ulli:nth-child(odd){
transform:perspective(500px)rotateY(45deg);
}
ulli:nth-child(even){
transform:perspective(500px)rotateY(-45deg);
}
為按鈕增加懸停效果，使懸停時(shí)的透視距離變短為200px，透視距離越短，旋轉(zhuǎn)的幅度看起來就越大：
ulli:nth-child(odd):hover{
transform:perspective(200px)rotateY(45deg);
padding-left:5%;
}
ulli:nth-child(even):hover{
transform:perspective(200px)rotateY(-45deg);
padding-right:5%;
}
最后，設(shè)置一個(gè)緩動(dòng)時(shí)間，使效果轉(zhuǎn)換變得平滑：
ulli{
transition:0.3s;
cursor:pointer;
}
大功告成！
css的選擇器可以分為三大類，即id選擇器、class選擇器、標(biāo)簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等
以上就是關(guān)于“純CSS怎么實(shí)現(xiàn)按鈕的懸停效果”的內(nèi)容，如果該文章對您有所幫助并覺得寫得不錯(cuò)，勞請分享給您的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
