我正在尝试创建两个容器,它们将放置在同一位置。当我鼠标悬停在顶部一个上面时,应该受到一些过渡的影响,并且底部/第二个div的内容应该显示出来。我在这里尝试了这个。
一切都很好。但是当我鼠标悬停在上面时,它会产生一些闪烁效果。如何使过渡更平滑? 我正在使用以下代码段进行过渡效果:
.box:hover{
-webkit-transform: rotate(100deg) scale(1);
-webkit-transform-origin:bottom right;
}
使用CSS transition
属性使动画更加平滑。
.box {
height:150px;
width:200px;
background:indianred;
position:absolute;
top:20%;
left:40%;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
注意:您正在使用 -webkit
特有的私有属性,为了使其跨浏览器兼容,请使用
.box {
height:150px;
width:200px;
background:indianred;
position:absolute;
top:20%;
left:40%;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.box1 {
height:150px;
width:200px;
border:1px solid black;
position:absolute;
top:20%;
left:40%;
z-index:-100;
}
.box:hover {
-webkit-transform: rotate(100deg) scale(1);
-webkit-transform-origin:bottom right;
-moz-transform: rotate(100deg) scale(1);
-moz-transform-origin:bottom right;
transform: rotate(100deg) scale(1);
transform-origin:bottom right;
}
好的,你在你的评论中要求一个解决方案,我也为此提供了一个解决方案。
<div class='box1'>
<div class='box'></div>
<p class="innerText">This is content</p>
</div>
.box {
height:150px;
width:200px;
background:indianred;
position:absolute;
top:0%;
left:0%;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.box1 {
height:150px;
width:200px;
border:1px solid black;
position:absolute;
top:20%;
left:40%;
z-index:-100;
}
.box1:hover .box {
-webkit-transform: rotate(100deg) scale(1);
-webkit-transform-origin:bottom right;
-moz-transform: rotate(100deg) scale(1);
-moz-transform-origin:bottom right;
transform: rotate(100deg) scale(1);
transform-origin:bottom right;
}
我的代码与你的代码的不同之处在于,首先,你错过了一个围绕着具有position: absolute;
属性的元素的position: relative;
容器,这将始终带来不想要的结果。
第二个错误是标记,如果你想隐藏一个元素,你应该嵌套一个覆盖元素,而不是将其放在你想要隐藏的元素外面。
因此在我的例子中,我将覆盖元素移动到了div
中,并且主要部分在于,你在同一个要变换的元素上使用了:hover
,因此它会无缘无故地折叠,相反,在我的选择器中,我在父元素的:hover
上触发动画,而不是要转换的元素本身。
position: relative;
包装元素。其次,您的标记和选择器是多余的,您正在触发相同的框上的悬停事件,这会导致它不断地折叠。我将在一个小时内为您提供详细的解释,因为我现在在办公室,所以请给我一些时间 :) - Mr. Alien