我正在尝试为我的布局制作可堆叠的六边形,使用css3的精彩转换功能制作!唯一的问题是当我和a:悬停效果改变它的不透明度时,在转换过程中它会改变反别名属性,平滑所有线条,并使文本模糊。它也会暂时排除它周围的一切,尽管它会在一秒左右后恢复。虽然这不一定与网站的功能相冲突,但它看起来很草率。
我尝试通过将代码更改为此来解决此问题:
虽然这可以解决所有问题的困难,但现在我的文字在过渡期间变得模糊不清。我试过添加-webkit-backspace-visibility:none;到.HexDesc,因为那是文本的直接容器。
.HexIn2 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-backface-visibility:hidden;
-webkit-background-size: 125%;
-moz-background-size: 125%;
background-size: 125%;
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
transition: all 0.5s ease;
}
.HexDesc {
padding: 3px; 0px 3px 0px;
-webkit-backface-visibility:none !important;
background: #ffffff;
color:#000;
margin-top:106px;
height: 81px;
font-family: 'PT Sans Narrow', sans-serif;
line-height:85%;
letter-spacing:1px;
font-size: 13px;
}
然而,这没有效果。我也试过在那里投掷“!important”,试图让它超越那个div中的其他所有东西,再次zilch!就像HexDesc容器中的任何东西一样,背面可视性绝对没有效果!这非常令人沮丧:C我想知道是否有人知道为什么会发生这种情况,以及我能绕过它的任何方式吗?
答案 0 :(得分:2)
通常是"中"值。对于旋转,您只能在0,90,180,270,360处获得模糊...这是浏览器本身的错误。 您可能会注意到这适用于css中的许多内容(例如,不在1或0时,不透明度通常会产生涓滴效应)。
在您的情况下,在您的jsfiddle中,如果您将所有120deg
替换为180deg
而将所有60deg
替换为90deg
,则它将完美地运作。 (意思是没有模糊,但你不再得到六边形)。对于三角形,我建议使用此边框黑客(http://apps.eky.hk/css-triangle-generator/)。你可以得到相同的结果。
对于"暂时取消",它也是来自Chrome的已知错误(可能还有其他浏览器,我不知道)。即使你去gmail或youtube,你仍然会看到这种情况发生。