javascript - css怎么解決hover鼠標移除后的效果
問題描述
想要實現(xiàn)背景圖片鼠標移入左右翻變換背景圖的動效,但是移出的時候想要去除掉翻轉,直接把背景圖片換回來,搗鼓了許多都不知道這么弄,就大神臨摹求解。。。
<!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>
問題解答
回答1:你是想hover的時候有反轉的效果,而移開時直接變換沒有反轉?那你把transition這個屬性放在hover里就行了
回答2:效果預覽:http://codepen.io/zengkan0703...這是我實現(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>
實現(xiàn)原理其實很簡單,主要是用 css3 的過渡 transition。動畫分為兩步:
元素翻轉 180 度
在翻轉到 90 度的 時候,更換背景圖片的 url。
這里面需要注意的是,翻轉動畫的過渡時間曲線應該用 “l(fā)inear”,這樣才能保證這個動畫是均勻進行的,就能夠控制好翻轉 90 度的時機。
回答3:把transition寫在.flipBtn:hover{}里面 在.flipBtn{}加上transition:none;
相關文章:
1. javascript - sublime快鍵鍵問題2. javascript - 移動端上不能實現(xiàn)拖拽布局嗎?3. 實現(xiàn)bing搜索工具urlAPI提交4. boot2docker無法啟動5. thinkPHP5中獲取數(shù)據(jù)庫數(shù)據(jù)后默認選中下拉框的值,傳遞到后臺消失不見。有圖有代碼,希望有人幫忙6. 前端 - 這段代碼一直生效不了,查半天因為 top: 0px; 分號后一個隱藏的東西,也不是占位符...刪了就可以生效,這是什么情況。。7. javascript - react native在run-android時出現(xiàn)這個錯誤該怎么解決?大神賜教8. c++ - QWebEngineView加載url后直接點擊鏈接沒有反應要怎么解決?9. javascript - 如何判斷不同兩個對象觸發(fā)同一事件?10. angular.js - 單頁應用(ng/vue)該如何監(jiān)聽用戶離開當前頁面(或者路由)?

網公網安備