首页 文章

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

提问于
浏览 次
4

让我们从小提琴开始：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 transform transition

1 回答

  • 2

    似乎动画中存在一些问题（CSS transition effect makes image blurry / moves image 1px, in Chrome?）

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

    • 把你的 .button 放在 .diamond 内

    • 移动 .inner-diamond 成为 .diamond 的兄弟姐妹，给它一个 opacity: 0 （删除 .diamond-content 的 opacity:0 ）

    • 设置 pointer-events:none 至 .inner-diamond

    使用兄弟方法来实现它

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

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

    回复于

相关问题