您的位置：首页技术文章
文章详情页

javascript - css怎么解决hover鼠标移除后的效果

浏览：81日期：2023-01-04 14:07:21

问题描述

想要实现背景图片鼠标移入左右翻变换背景图的动效，但是移出的时候想要去除掉翻转，直接把背景图片换回来，捣鼓了许多都不知道这么弄，就大神临摹求解。。。

<!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...这是我实现的代码，不知道是不是你想要的效果：

<!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>

实现原理其实很简单，主要是用 css3 的过渡 transition。动画分为两步：

元素翻转 180 度

在翻转到 90 度的 时候，更换背景图片的 url。

这里面需要注意的是，翻转动画的过渡时间曲线应该用 “linear”，这样才能保证这个动画是均匀进行的，就能够控制好翻转 90 度的时机。

回答3：

把transition写在.flipBtn:hover{}里面 在.flipBtn{}加上transition：none;

标签： JavaScript
上一条：javascript - 怎么将指定内容提供js分享到Line上？下一条：javascript - 为什么jquery ajax代码在网页上跑起来没有问题，在移动端却没有反应，也不知道怎么调试
相关文章：
1. java后台怎么转换ios传过来的utf-8的json数据2. javascript - vue引入样式的问题3. 微信开放平台 - ios APP能不能打开微信然后通过微信跳转到指定的URL？4. javascript - nodejs调用qiniu的第三方资源抓取，返回401 bad token，为什么5. javascript - 怎么实现让 div 里面的 img 元素 中心居中, 如下示例图6. javascript - vue+iview upload传参失败 跨域问题后台已经解决 仍然报403，这是怎么回事啊？7. Mac环境下QT编译MySQL驱动屡次失败？如何？8. php - 微信开发验证服务器有效性9. html5 - 使用angular中，图片上传功能中选择多张图片是怎么实现的？有什么好的思路吗？10. javascript - 移动端一个小效果
排行榜
docker容器呢SSH为什么连不通呢？
docker容器呢SSH为什么连不通呢？
1. docker gitlab 如何git clone？
2. docker内创建jenkins访问另一个容器下的服务器问题
3. docker-compose 为何找不到配置文件？
4. docker 下面创建的IMAGE 他们的 ID 一样？这个是怎么回事？？？？
5. html5 - 使用angular中，图片上传功能中选择多张图片是怎么实现的？有什么好的思路吗？
6. javascript - 怎么实现让 div 里面的 img 元素 中心居中, 如下示例图
7. javascript - vue引入样式的问题
8. javascript - vue+iview upload传参失败 跨域问题后台已经解决 仍然报403，这是怎么回事啊？
9. php - 微信开发验证服务器有效性
10. javascript - 移动端一个小效果
热门标签