我正在做一个大项目,并且我只用过几次变换,所以我没有太多的经验。这次,客户对效果有许多要求。
我有一个#item
,里面有一个按钮和一个透明的div
。悬停时,opacity
会在透明的0.8
上更改为div
,并且按钮从顶部显示为transform
。问题是,当我将鼠标悬停在div
上时,该按钮出现了,但是几毫秒后,您会看到该按钮的大小增加并且文本移动了几个像素。 (Firefox 42.0-OSX)
我尝试了几种解决方案来修复它,但是没有运气,我真的不知道为什么会这样。 (-webkit-font-smoothing: antialiased;
)
我很幸运,因为这一次我将其复制到一个文件中,并且不需要复制100kb的CSS。 :)
代码真的很简单。如果您能给我一些指导,教程或解决方案,请多多关照。
我在下面添加了代码,但在JSFiddle也可以使用。
#item {
width: 300px;
height: 300px;
background: gray;
position: relative;
}
a {
position: absolute;
top: 50%;
left: 50%;
padding: 10px 15px;
background: black;
display: inline-block;
transform: translate(-50%, -80%);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
color: #fff;
text-decoration: none;
}
#item:hover a {
transform: translate(-50%, -50%);
opacity: 1;
}
#overlay {
background-color: green;
opacity: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: opacity 0.3s ease;
}
#item:hover #overlay {
opacity: 1;
}
<div id="item">
<div id="overlay"></div>
<a href="">Button</a>
</div>
最佳答案
一些CSS渲染起来“昂贵”。您可以添加此转换技巧,以使您的GPU顺利完成此任务。它告诉浏览器将进行z轴转换(为零,实际上不是转换),因此计算机除了使用CPU外还使用GPU。这种增加的功能通常有助于解决视觉故障。虽然严格来说这是一个hack :)
萨斯:
.gpu {
@include vendor(transform, translateZ(0));
}
的CSS
.gpu {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}