溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Css中2d轉(zhuǎn)換怎么用

發(fā)布時(shí)間：2022-03-10 10:38:25 來(lái)源：億速云 閱讀：141 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要為大家展示了“Css中2d轉(zhuǎn)換怎么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Css中2d轉(zhuǎn)換怎么用”這篇文章吧。

css的2d轉(zhuǎn)換十分強(qiáng)大，能夠在不使用js的情況下，實(shí)現(xiàn)頁(yè)面的元素與用戶之間更多動(dòng)態(tài)的交互，增強(qiáng)用戶體驗(yàn)。其中使用最多的就是hover偽類。

1、創(chuàng)建一個(gè)頁(yè)面的div元素：

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>2d轉(zhuǎn)換測(cè)試</title> </head> <body> <div id="fr"> <div class="de">春晚</div> <div class="de">春晚</div> <div class="de">春晚</div> <div class="de">春晚</div> </div> </body></html>

4、給第一個(gè)正方形加入鼠標(biāo)點(diǎn)擊

.de:first-child:hover{ transform: translate(0px,-5px);transition: transform 1s; }

鼠標(biāo)移動(dòng)到正方形區(qū)域后，小方塊會(huì)向上移動(dòng)5px，有過(guò)渡效果；離開(kāi)小方塊后，立即回到原位，沒(méi)有過(guò)渡效果；

另外一種寫(xiě)法：

.de:first-child{ transition: transform 1s; } .de:first-child:hover{ transform: translate(0px,-5px); }

將transition過(guò)渡效果寫(xiě)在被選中的整個(gè)元素中，出現(xiàn)的效果

鼠標(biāo)移動(dòng)到正方形區(qū)域后，小方塊會(huì)向上移動(dòng)5px，有過(guò)渡效果；離開(kāi)小方塊后，小方塊會(huì)到原始位置，有過(guò)渡效果。

原理：將過(guò)渡效果transition寫(xiě)在hover偽類中，鼠標(biāo)進(jìn)入時(shí)，hover效果會(huì)應(yīng)用transition效果；鼠標(biāo)移出，屬于非hover，沒(méi)有過(guò)渡效果；即，元素移動(dòng)過(guò)程中，有過(guò)渡效果；元素回到原始位置，沒(méi)有過(guò)渡效果。將transition過(guò)渡寫(xiě)在整個(gè)元素中，會(huì)在元素整個(gè)移動(dòng)過(guò)程中起到過(guò)渡效果。

5、給每個(gè)小方塊加入動(dòng)畫(huà)效果完整的css：

#fr{ width: 500px; height: 600px; border: 1px solid gray; margin: 20px auto; } .de{ width:100px; height:100px; border:1px solid green; margin: 10px auto; } .de:first-child{ transition: transform 1s; } .de:first-child:hover{ transform: translate(0px,-5px); } .de:nth-child(2){ transition: transform 1s; } .de:nth-child(2):hover{ transform: rotate(360deg); } .de:nth-child(3){ transition: transform 1s; } .de:nth-child(3):hover{ transform: skew(30deg ,30deg); } .de:last-child{ transition: transform 1s; } .de:last-child:hover{ transform: scale(1.05,1.05); }

以上是“Css中2d轉(zhuǎn)換怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手