太棒了,你用宝贵的时间阅读我的问题!
我正在尝试在悬停时翻转 div。一切都很顺利,但在转换过程中它会闪烁。看起来几乎像是翻转了多次!这破坏了翻转的整体效果。下面是我的代码和小提琴:
小提琴:FIDDLE http://jsfiddle.net/h463d8p6/1/
对于 CSS:
.rotate {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
padding:20px;
background-color: #333;
width: 200px;
text-align: center;
margin: 0 auto;
font-family: sans-serif;
color: #FFFFFF;
border-top: #E9F01D 3px solid;
}
.rotate:hover {
letter-spacing: 5px;
color: #E9F01D;
cursor: pointer;
-ms-transform: rotatex(360deg);
-webkit-transform: rotatex(360deg);
transform: rotatex(360deg);
}
这种闪烁效应是否可以预防?如果是这样我该怎么做?
提前致谢!
正如评论中提到的:
主要的问题是:将鼠标悬停在移动(或动画)div 上时,您可能会从该元素上取消悬停,因为它在光标下方移动。
解决方案:将悬停选择器放在包含元素上,该元素在悬停时不会改变其大小:
示例在这里 http://jsfiddle.net/h463d8p6/2.
.rotate {
width: 200px; height:80px;
background:green;
}
.rotate .rotate-inner {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
padding:20px;
background-color: #333;
text-align: center;
margin: 0 auto;
font-family: sans-serif;
color: white;
border-top: #E9F01D 3px solid;
}
.rotate:hover .rotate-inner {
letter-spacing: 5px;
color: #E9F01D;
cursor: pointer;
-webkit-transform: rotatex(360deg);
-moz-transform: rotatex(360deg);
-ms-transform: rotatex(360deg);
transform: rotatex(360deg);
}
<div class="rotate">
<div class="rotate-inner">HOVER ME</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)