javascript - css怎么解決hover鼠標(biāo)移除后的效果
問(wèn)題描述
想要實(shí)現(xiàn)背景圖片鼠標(biāo)移入左右翻變換背景圖的動(dòng)效，但是移出的時(shí)候想要去除掉翻轉(zhuǎn)，直接把背景圖片換回來(lái)，搗鼓了許多都不知道這么弄，就大神臨摹求解。。。
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>3D</title> <style> ul li{ list-style: none; cursor: pointer; position: relative; } .flipBtn, .flipBtn_face{ position: absolute; width:167px; height:116px; } .flipBtn {transition: transform 0.4s; transform-style: preserve-3d; cursor: pointer; position: relative; float: left; } .flipBtn_front{ backface-visibility: hidden; } .flipBtn_front{ width:151px; height:100px; margin:8px; background:url(./image/pic00.jpg) no-repeat; } .flipBtn_back{ width:151px; height:100px; margin:8px; background:url(./image/pic01.jpg) no-repeat; } .flipBtn_mid.flipBtn_face{ transform: rotateY(90deg); -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); } .flipBtn:hover{ transform:rotateY(-180deg); -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); } </style></head><body> <ul class='flipBtnWrapper'> <li class='flipBtn'> <a class='flipBtn_face flipBtn_back'></a> <p class='flipBtn_face flipBtn_mid'></p> <p class='flipBtn_face flipBtn_front'></p> </li> </ul></body></html>
問(wèn)題解答
回答1：你是想hover的時(shí)候有反轉(zhuǎn)的效果，而移開(kāi)時(shí)直接變換沒(méi)有反轉(zhuǎn)？那你把transition這個(gè)屬性放在hover里就行了
回答2：效果預(yù)覽：http://codepen.io/zengkan0703...這是我實(shí)現(xiàn)的代碼，不知道是不是你想要的效果：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style> .box{ width: 200px; height: 200px; background:url(http://www.w3school.com.cn/i/site_photoref.jpg) no-repeat; transition: transform 0.5s linear ,background-image 0s 0.25s; background-size: cover; } .box:hover{ transform: rotateY(180deg); transform-origin: center; background-image: url(http://www.w3school.com.cn/i/site_photoqe.jpg); } </style></head><body> <p class='box'></p></body></html>
實(shí)現(xiàn)原理其實(shí)很簡(jiǎn)單，主要是用 css3 的過(guò)渡 transition。動(dòng)畫(huà)分為兩步：
元素翻轉(zhuǎn) 180 度
在翻轉(zhuǎn)到 90 度的 時(shí)候，更換背景圖片的 url。
這里面需要注意的是，翻轉(zhuǎn)動(dòng)畫(huà)的過(guò)渡時(shí)間曲線應(yīng)該用 “l(fā)inear”，這樣才能保證這個(gè)動(dòng)畫(huà)是均勻進(jìn)行的，就能夠控制好翻轉(zhuǎn) 90 度的時(shí)機(jī)。
回答3：把transition寫(xiě)在.flipBtn:hover{}里面 在.flipBtn{}加上transition：none;
相關(guān)文章：
1. html - 哪些情況下float會(huì)失效？2. mac連接阿里云docker集群，已經(jīng)卡了2天了，求問(wèn)？3. 就一臺(tái)服務(wù)器，mysql數(shù)據(jù)庫(kù)想實(shí)現(xiàn)自動(dòng)備份，如何設(shè)計(jì)？4. css3 - text-overflow為何會(huì)在li的子標(biāo)簽a下失效5. javascript - node.js不同模塊之間如何傳值6. android - 哪位大神知道java后臺(tái)的api接口的對(duì)象傳到前端后輸入日期報(bào)錯(cuò)，是什么情況？求大神指點(diǎn)7. javascript - js控制元素樣式的疑惑8. [前端求職必看]前端開(kāi)發(fā)面試題與答案精選_擴(kuò)展問(wèn)題9. docker Toolbox在win10 家庭版中打開(kāi)報(bào)錯(cuò)10. javascript - 求解答，koa-bodyparser獲取到的參數(shù)是空對(duì)象，為什么？？？？？
網(wǎng)公網(wǎng)安備