這篇文章主要為大家展示了純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è)按鈕：

<ul>

<li>home</li>

<li>products</li>

<li>services</li>

<li>contact</li>

</ul>

居中顯示：

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background:cornsilk;

}

去掉列表項(xiàng)前面的符號：

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的選擇器有哪些

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

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

網(wǎng)站標(biāo)題：純CSS怎么實(shí)現(xiàn)按鈕的懸停效果
URL地址：http://www.rwnh.cn/article14/jgpoge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、域名注冊、網(wǎng)站營銷、服務(wù)器托管、網(wǎng)站收錄、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)