使用滤镜时，CSS过渡效果模糊。

Question

使用滤镜时，CSS过渡效果模糊。

8

我正在处理一个使用CSS创造六边形的网站。这种技术是使用转换来旋转一个框，使用overflow:hidden剪辑边缘，然后将图像朝相反方向旋转以呈现直线并显示六边形。这里有我修改过使其工作的codepen代码，可以看到过渡效果非常好。

但现在我遇到的问题是，我想把灰度滤镜应用于我的设计上，但我发现所有的过渡都变得模糊了。在Firefox Dev Edition中，我看到图像和文本开始清晰，悬停时变模糊，然后再次变回清晰。当在Chrome中查看时，无论是否悬停，都会变得模糊。

Sharp greyscale vs blurry transition

.hexContainer {width:400px;}
#categories {overflow:hidden;width:100%;margin:0 auto; padding:0 0 1em; position: relative;}
#categories .hexBox {position:relative;list-style-type:none;width:100%;padding-bottom:115%;float:left;overflow:hidden;visibility:hidden;-webkit-transform:rotate(-60deg) skewY(30deg);-ms-transform:rotate(-60deg) skewY(30deg);transform:rotate(-60deg) skewY(30deg); z-index: 10;}
#categories .hexBox *{position:absolute;visibility:visible;}
#categories .hexBox>div{width:100%;height:100%;text-align:center;color:#fff;overflow:hidden;-webkit-transform:skewY(-30deg) rotate(60deg);-ms-transform:skewY(-30deg) rotate(60deg);transform:skewY(-30deg) rotate(60deg);-webkit-backface-visibility:hidden;}
#categories .hexBox img{left:-100%;right:-100%;width:auto;height:100%;margin:0 auto;  -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out; -webkit-transform: translateZ(0); }
#categories .hexBox h3 {position: absolute; bottom: 25%; left: 2%; font-weight: 300; color: #fff; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;}
#categories .hexBox h3 strong {font-weight: 700; padding-left:.25em;}
#categories div p{width:90%;padding:0 5%;}
#categories .hexBox p{padding-top:50%;top:110%;padding-bottom:50%;}

/* hovers */
#categories .hexBox div:hover p{top:50%;padding-top:10%;}
#categories .hexBox div:hover img { -webkit-filter: grayscale(0%); filter: grayscale(0%); -webkit-transform: translateZ(0); }
#categories .hexBox div:hover h3 {bottom:40%;}

你可以在这里查看问题： http://codepen.io/anon/pen/MwgebO 你有任何解决方法吗？

- jbwharris

3

我也经常遇到这个问题。我认为这是浏览器层面的优化，当一个元素正在进行过渡效果时，它会以较低的细节呈现变换（这样它就不必在每一帧中重新绘制完整的元素）。我使用的解决方法涉及快速过渡和缓动曲线的边界不要太柔软（接近于 x 轴上的0和1）。 - John Weisz

1

@JánosWeisz，您能详细解释一下吗？我不确定您所说的“缓动曲线在边界处不太柔和”是什么意思。我尝试缩短过渡速度，但1/4秒已经非常快了，没有看到任何改善。 - jbwharris

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vals · Accepted Answer

我认为我有一个解决方案。在我的系统中，它没有模糊的问题。

我所做的事情：

1）重要：图像被重新缩放显示。原生分辨率为500x500，但分配的宽度为480px。这不利于使显示清晰。

2）改变了获取灰度的方式。从图像中移除滤镜，并添加混合模式。 codepen

#categories .hexBox img{
    left:-100%;  
    right:-100%; 
    margin:0 auto;  
    mix-blend-mode: luminosity;  
    -webkit-transform: translateZ(0); 
}

现在，为了使混合模式产生效果，我们需要容器中有白色背景。

#categories .hexBox>div{
    width:100%;
    height:100%;
    text-align:center;
    background-color: white; 
    transition: all 2s ease-in-out;
}

我们对它设置了过渡效果。

现在，对于灰度滤镜的淡出，我们只需要使容器透明即可。

#categories .hexBox div:hover {
    background-color: transparent;
}

混合模式的支持与滤镜差不多。