转换过渡导致跳转或模糊内容CSS

2019年7月21日 158次阅读

让我们从小提琴开始：
http://jsfiddle.net/r1kw37g5/

.grid-item .diamond .inner-diamond{
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 394px;
  height: 394px;
  position: relative;
  top: -23%;
  left: -23%;
}

情况是我创建了一个菱形网格.
该网格中的元素旋转-45度,内部的容器旋转45度,使内容再次平直. (内容出现在悬停中)

在该容器内部是一个带有简单动画的按钮,这是问题开始的地方.当您将鼠标悬停在按钮上时,其他内容会变得模糊一段时间,直到动画结束并向右跳转1px.

我试过：在容器上放一个translateZ(0)来阻止它跳转.这有效,但内容模糊不清.我试图通过缩放和缩放组合preserve3d和字体平滑来对抗模糊内容,但到目前为止还没有运气.

问题是,是否有人知道一种方法,我可以动画按钮而不会跳跃而没有其他内容变得模糊？

最佳答案 好像动画中有一些问题(
CSS transition effect makes image blurry / moves image 1px, in Chrome?)

我将把文本放在transform的元素之外.

>把你的.button放在.diamond里面
>移动.inner-diamond成为.diamond的兄弟,给它一个不透明度：0(删除.diamond-content的不透明度：0)
>将pointer-events：none设置为.inner-diamond

使用兄弟方法来实现它

.diamond:hover + .inner-diamond {
  opacity: 1
}

快速演示(布局不漂亮)：
http://jsfiddle.net/r1kw37g5/6/

点赞