如何实现hover事件中旋转门的切换效果

最新推荐文章于 2022-05-06 15:50:08 发布
最新推荐文章于 2022-05-06 15:50:08 发布
阅读量360 收藏
点赞数
分类专栏： CSS效果 文章标签： 前端 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42855541/article/details/83056632
版权 
	我们经常看到当鼠标移到一个div或者图片或者其他上的时候，就会切换到另外一个div上，并且是以90度旋转效果，有点像现实中的旋转门一样，现在就简单的写下，看下是如何实现的吧。

<body>
<div class="box">
    <div class="first">1111</div>
    <div class="second">2222</div>
</div>
</body>

*{
    margin: 0;
    padding: 0;
}
.box{
    width: 300px;
    height: 300px;
    border: 1px solid;
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

}
.first{
    width: 100%;
    height: 100%;
    background-color: #3388FF;

}
.second {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
 
}


首先创建一个容器box，在里面放了两个div，first和second,通过定位将两个div重合，并且将容器固定在屏幕的中间。



.first{
    width: 100%;
    height: 100%;
    transform: rotateY(0deg);
    background-color: #3388FF;
    transition: 0.8s ease-in;
    backface-visibility:hidden;
}



.second {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateY(90deg);
    background-color: #ff0066;
    transition: 0.8s ease-in;
}

我们将第一个设为0度，第二个设为90度，这样的话第二个就被隐藏掉了，同时设定了一个事件发生过程的时间为0.8秒。

.box:hover .first{
transform: rotateY(-90deg);
}
.box:hover .second{
transform: rotateY(0deg);
}

添加了hover事件，使first消失，second出现，这个时候我们发现两个div之间实现了切换，但是都是在同一个平面发生的，缺少立体效果，我们可以通过添加 perspective属性来实现。下面就是整个的完整代码了。


*{
    margin: 0;
    padding: 0;
}
.box{
    width: 300px;
    height: 300px;
    border: 1px solid;
    position: absolute;
    perspective: 1000px;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

}
.first{
    width: 100%;
    height: 100%;
    transform: rotateY(0deg);
    background-color: #3388FF;
    transition: 0.8s ease-in;
    backface-visibility:hidden;
}
.second {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateY(90deg);
    background-color: #ff0066;
    transition: 0.8s ease-in;
}
.box:hover .first{
    transform: rotateY(-90deg);
}

.box:hover .second{
    transform: rotateY(0deg);
}
伯纳乌中的右路走廊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Python3实现旋转数组的3种算法
jycg789的博客
11-26 180
下面是Python3实现的旋转数组的3种算法。 一、题目 给定一个数组，将数组中的元素向右移动 k 个位置，其中 k 是非负数。 例如： 输入: [1,2,3,4,5,6,7] 和 k = 3 输出: [5,6,7,1,2,3,4] 解释: 向右旋转 1 步: [7,1,2,3,4,5,6] 向右旋转 2 步: [6,7,1,2,3,4,5] 向右旋转 3 步: [5,6,7,1,2,3,4] 说明： 1.尽可能想出更多的解决方案，至少有三种不同的方法可以解决这个问题。 2.要求使用
旋转门算法
qiuzhenguang的专栏
06-24 4628
<br />读取数据<br />if (1>2) fid = fopen('data.txt','r'); t=zeros(6000,6); for i=1:6000 tline = fgets(fid,100); j=1;state=0;base=0.1; A=size(tline); while (j<A(2)) switch state case{0} if (tline(j)>='0'
Silverlight旋转门效果
11-23
Silverlight旋转门效果
[前端]JavaScript滑动门特效
童凌的技术博客
04-05 2002
使用Javascript中的DOM操作，实现电商网站常用的一个滑动门特效。 本例用使用到的四张图像如下： 首先编写html代码，建立基本标签，文件存为index.html. <!doctype html> <html> <head> <meta charset="utf-8"> <title>sliding-doors</title> <
旋转门效果
weixin_30414245的博客
02-11 91
上周，客户要求游戏中制作一个类似旋转门的效果，参考了网上的一些代码，结合自己游戏的要求，仿制了出来。 直接上代码： "use strict"; var RevolvingMenu = cc.Layer.extend({ //菜单已经旋转角度 弧度 _angle: 0, //菜单项集合,_children顺序会变化，新建数组保存顺序 ...
JS CSS 各类效果 很酷很炫
03-16
例如，使用CSS3可以实现平滑的滑动门效果、旋转元素、背景滚动动画等。 三、JS与CSS结合实现酷炫效果 将JS和CSS结合使用，可以创建出更高级的交互效果。比如： 1. **悬停效果**：使用CSS伪类`:hover`配合JavaScript...
各种网站特效实现
10-27
可以利用CSS3的`:hover`伪类结合`transform`、`opacity`等属性来创建各种动态效果，例如颜色渐变、缩放、旋转等。 三、滚动视差效果（Parallax Scrolling） 滚动视差效果使得背景元素以不同的速度相对于前景元素...
DIVCSS特效，网页js特效
04-14
12. **网页特效**：如悬停效果、淡入淡出、滑动门、图片轮播、下拉菜单、提示框等，都是`DIVCSS`中常见的网页特效，可以大大提高网页的互动性和吸引力。 在学习和应用`DIVCSS`时，不断实践和理解这些知识点，将有助...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
实用jquery+CSS实现流畅tab切换效果(Coda-Slider 1.1.1)插件 11.实用jquery标签Tab插件下载可切换不同的颜色 12.推荐jquery仿淘宝网商品排行榜展示切换效果,适合电子商务网站使用 13.一款jQuery黑金钢动感Tab...
1500个前端开发常用JavaScript特效
12-09
这些效果通过事件监听（如`click`或`hover`）和DOM操作（如`appendChild`、`removeChild`）实现。 3. **图片轮播**：图片轮播组件广泛应用于网站中，JavaScript可以控制图片的切换，添加自动播放、触摸滑动等功能。...
html类似滚轮选择器,HTML页面中5种超酷的伪类选择器:hover效果
weixin_39954569的博客
06-03 557
想在自己的网站中应用超酷的hover效果吗？也许你可以从如下的这些实例中获得一些灵感，如果你喜欢这些效果，也可以直接拷贝代码并应用到你的站点。给平淡的站点带来活力hover效果能给网页增加一些动态效果，并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果，但是随着CSS3的引入和现代浏览器的支持，我们可以用纯粹的CSS代码来实现这些有趣的效果。所谓的现代浏览器，更多的是指...
css 背景效果_软件技术：我写CSS的常用套路(附demo的效果实现与源码）
weixin_39577908的博客
11-20 616
前言本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。1、交错动画有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟(delay)这一属性。举个栗子，...
旋转门数据压缩算法在PostgreSQL中的实现 - 流式压缩在物联网、监控、传感器等场景的应用...
weixin_34197488的博客
08-13 612
背景 在物联网、监控、传感器、金融等应用领域，数据在时间维度上流式的产生，而且数据量非常庞大。 例如我们经常看到的性能监控视图，就是很多点在时间维度上描绘的曲线。 又比如金融行业的走势数据等等。 我们想象一下，如果每个传感器或指标每100毫秒产生1个点，一天就是864000个点。 而传感器或指标是非常多的，例如有100万个传感器或指标，一...
旋转门压缩算法(SDT)的Go实现
weixin_41621706的博客
05-06 2766
原理 实质上，是计算门轴到新数据点之间线段的斜率，门轴既是线段的零点。由于直线段的公式为： x = kt+b //k为斜率,b为0点,t为时间轴,x为数据大小 上下门轴点的计算方法为： ub=x0+ΔE //上门轴，x0为存储点的数值 db=x0-ΔE //下门轴，x0为存储点的数值 上下门斜率的计算方法为： uk=(xt-ub)/Δt //上门斜率 dk=(xt-db)/Δt //下门斜率 在t0点，门关闭，上门斜率无线小，下门斜率无限大。随着时间轴的右伸，上门斜率逐渐变大(单向，只能变大)，下门
CSS3.0动画之hover---Y轴----3D旋转
weixin_30823833的博客
06-13 141
div#div2{display: table; width: 100%; height: 100%; text-decoration: none; outline: none; -webkit-transition: all 800ms ease-out; /* CSS3 transition. Last value ...
Web页面中5种超酷的Hover效果
05-10 1362
想在自己的网站中应用超酷的hover效果吗？也许你可以从如下的这些实例中获得一些灵感，如果你喜欢这些效果，也可以直接拷贝代码并应用到你的站点。 给平淡的站点带来活力 hover效果能给网页增加一些动态效果，并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果，但是随着CSS3的引入和现代浏览器的支持，我们可以用纯粹的CSS代码来实现这些有趣的效果。所谓的现代...
css3实现可翻转的hover效果
Fly的博客
05-23 5344
css3实现可翻转的hover效果1.css/*基础样式*/ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0 auto; text-align: center; background-color: #FFFFC...
&:hover
u012174809的专栏
01-07 5222
指的是上一层css的样式 .myview{ &:hover{ cursor: pointer; } } 等同于 .myview :hover{ cursor: pointer; }
React 循环组件 && hover 实现的小效果
sunlei19951007的博客
05-10 6647
在一个展示型网站一些 hover 的小效果简单又实用。 在 React 中对元素 / 组件添加 onMouseEnter 和 onMouseLeave 即可完成鼠标移入移出事件。 Code import React, {Component} from 'react'; import './index.css'; class Management extends Comp...
qt中hover事件中如何获取鼠标的位置
最新发布
04-27
在Qt的hover事件中，可以通过QHoverEvent的pos()方法来获取鼠标的位置。具体实现方法如下： ```c++ void ExampleWidget::hoverMoveEvent(QHoverEvent *event) { QPoint mousePos = event->pos(); // 进行一些操作...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值