javascript - 悬停时如何将 HTML 元素稍微远离视口边缘以使其恢复原状？

Question

我想编写一个包含多个框的评论部分（每人一个框/评论）。有 3 个主要元素是可见的，每侧有 2 个元素会稍微偏离页面，但在悬停时会移入。

这样的事情可能吗？还是我应该制作一个旋转木马，让评论四处滑动以使自己更容易？

标签： javascripthtmlhoveroverflowelement

Answer 1

您可以考虑使用 CSS 悬停方法来启动将 HTML 元素向内引入的动画。它可能看起来像这样：

@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
/* Credit to https://github.com/daneden for CSS animations */

review1:hover {
    animation-name: slideInRight;
}
review2:hover {
    animation-name: slideInLeft;
}