如何在图片悬停时在 CSS 中创建分离动画？

Question

我有下面的图片，我想对从左上角到右下角穿过徽标的线的对角线分割进行动画处理，如下所示。动画会将 X 轴上的图片分开几个像素。

https://i.ibb.co/fDzZ6Sc/Logo.png

到目前为止，我已经取得了一些进展，我两次使用同一张图片并将它们相互重叠并在 X 轴上倾斜。然而，这将图片从右上角到左下角分开。我喜欢它的另一种方式，无法弄清楚。

我也想不出如何将鼠标悬停在整个图片上，以便两边都执行动画。

body { background: gainsboro; }
.pageOption {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  width: 40em; height: 27em;
}
.option, .option img { width: 100%; height: 100%; }
.option {
  overflow: hidden;
  position: absolute;  
  /* arctan(27 / 40) = 34.01935deg 
   * need to skew by 90deg - 34.01935deg = 55.98065deg
  */
  transform: skewX(-55.98deg);
  
  
}

.option:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}
.option:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}

.option img, .option:after {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}

.option:hover {
  left: -.8em;
  transition: 1s;
}

<div class='pageOption'>
  <a href='#' class='option'>
    <img src='https://i.ibb.co/fDzZ6Sc/Logo.png'>
  </a>
  <a href='#' class='option'>
    <img src='https://i.ibb.co/fDzZ6Sc/Logo.png'>
  </a>
</div>

基本上我想要发生的事情是在将鼠标悬停在整个图片上时，两侧会从中间分开（从从左上角到右下角的线切割），当你将鼠标移开时，图像一起返回。

Answer 1

您可以考虑 clip-path 并轻松地执行此操作，如下所示。诀窍是使用两个相反的多边形，组合将形成完整的图像。

.image {
  width:340px;
  height:230px;
  background-image:url(https://i.ibb.co/fDzZ6Sc/Logo.png);
  background-size:0;
  position:relative;
}
.image:before,
.image:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:inherit;
  background-size:cover;
  transition:1s;
}
.image:before {
  clip-path:polygon(0 0, 15% 0,  97% 100%, 0 100%);
}

.image:after {
  clip-path:polygon(100% 0, 15% 0,  97% 100%);
}

.image:hover::before{
   transform:translate(-20px,-10px);
}

.image:hover::after{
   transform:translate(20px,10px);
}

body {
 background:pink;
}

<div class="image">

</div>

如果您不想剪切The，请调整剪辑路径

.image {
  width:340px;
  height:230px;
  background-image:url(https://i.ibb.co/fDzZ6Sc/Logo.png);
  background-size:0;
  position:relative;
}
.image:before,
.image:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:inherit;
  background-size:cover;
  transition:1s;
}
.image:before {
  clip-path:polygon(0 0, 32% 0 ,32% 19%,  97% 100%, 0 100%);
}

.image:after {
  clip-path:polygon(100% 0,32% 0,32% 19%,97% 100%);
}

.image:hover::before{
   transform:translate(-20px,-10px);
}

.image:hover::after{
   transform:translate(20px,10px);
}

body {
 background:pink;
}

<div class="image">

</div>