当前位置: 首页 > 面试题库 >

CSS过渡效果会导致图像模糊/在Chrome中将图像移动1px?

姬魁
2023-03-14
问题内容

我有一些CSS,悬停时CSS过渡效果会移动div。

正如您在html" target="_blank">示例中看到的那样,问题在于translate过渡具有可怕的副作用,即使div中的图像向下/向右移动1px(并且可能会略微调整大小吗?),以致它看起来不合适并没重点…

毛刺似乎一直在应用悬停效果的整个过程中,并且从反复试验的过程中,我可以肯定地说,似乎仅在平移过渡移动div时才出现(也应用了框阴影和不透明度,但是对删除后的错误)。

仅当页面具有滚动条时,才会出现此问题。因此,仅使用一个div实例的示例就可以了,但是一旦添加了更多相同的div,并且页面因此需要滚动条,问题就会再次出现…


问题答案:

您是否在 CSS中 尝试过此方法?

.yourDivClass {
    /* ... */

    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

这样做是为了使该分区表现为“更多2D”。

  • 默认情况下绘制背面,以允许旋转等翻转物件。如果只向左,向右,向上,向下,缩放或顺时针旋转,则无需这样做。
  • 将Z轴平移为始终具有零值。

编辑

Chrome现在可以处理backface- visibility并且transform没有-webkit-前缀。我目前不知道这会如何影响其他浏览器的呈现(FF,IE),因此请谨慎使用非前缀版本。



 类似资料:
  • 我在试着模糊图像 它会模糊图像,但不是图像的所有部分。 我所缺少的地方,这样它就会模糊完整的图像。没有任何路径。

  • 问题内容: 嗨,我正在尝试使背景图像模糊,但我认为这样做不够。对此的任何帮助都会增强我的精力。谢谢 这是我的CSS 我正在尝试应用此功能,但它只会模糊我所有插入背景图像的网页。 谢谢。 问题答案: 如果您要应用模糊处理,那么它将模糊您的网页。 而不是要添加背景,您需要创建另一个与同尺寸该网页,并添加模糊处理它。 例

  • 问题内容: 我正在尝试在Java游戏中实现模糊机制。如何在运行时创建模糊效果? 问题答案: 请参阅/ Google“卷积滤镜”,这是一种根据周围像素值更改像素值的方法。因此,除了模糊之外,您还可以进行图像锐化和寻线。

  • 主要内容:1. transition-property,2. transition-duration,3. transition-timing-function,4. transition-delay,5. transition通常当 CSS 的属性值更改后,浏览器会立即更新相应的样式,例如当鼠标悬停在元素上时,通过 :hover 选择器定义的样式会立即应用在元素上。在 CSS3 中加入了一项过渡功能,通过该功能您可以将元素从一种样式在指定时间内平滑的过渡到另一种样式,类似于简单的动画,但无需借

  • 本文向大家介绍jsp图片效果大全(图像震动效果、闪烁效果、自动切换图像),包括了jsp图片效果大全(图像震动效果、闪烁效果、自动切换图像)的使用技巧和注意事项,需要的朋友参考一下 本文主要介绍jsp实现图像震动效果、闪烁效果、自动切换图像的资料,废话不多说了,具体代码如下: 1.当鼠标指针经过图像时图像震动效果 2.图片闪烁效果 3.自动切换图像 希望本文所述对你有所帮助,jsp图片效果大全(图像

  • 嗨,我正试图模糊背景图像,但我认为这样做是不够的。对它的任何帮助都会让我为之振奋。谢谢 这是我的CSS 我试图应用这个,但它模糊了我所有的网页安装的背景图像只。 非常感谢。