這篇文章主要為大家展示了純CSS怎么實現(xiàn)按鈕的懸停效果，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“純CSS怎么實現(xiàn)按鈕的懸停效果”這篇文章吧。

創(chuàng)新互聯(lián)公司主要從事成都做網(wǎng)站、網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)泰山,10年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

代碼解讀

定義dom，容器是一個無序列表，包含4個元素，代表4個按鈕：

• home
• products
• services
• contact

居中顯示：

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background:cornsilk;

}

去掉列表項前面的符號：

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)，此時透視的距離是500px，注意perspective()函數(shù)和rotateY()函數(shù)的順序不能寫反：

ulli:nth-child(odd){

transform:perspective(500px)rotateY(45deg);

}

ulli:nth-child(even){

transform:perspective(500px)rotateY(-45deg);

}

為按鈕增加懸停效果，使懸停時的透視距離變短為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è)置一個緩動時間，使效果轉(zhuǎn)換變得平滑：

ulli{

transition:0.3s;

cursor:pointer;

}

大功告成！

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標(biāo)簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

以上就是關(guān)于“純CSS怎么實現(xiàn)按鈕的懸停效果”的內(nèi)容，如果該文章對您有所幫助并覺得寫得不錯，勞請分享給您的好友一起學(xué)習(xí)新知識，若想了解更多相關(guān)知識內(nèi)容，請多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。