带有剪辑路径的图像动画

Question

这是我问题的演示：演示

我有两个absolute图像，每个图像都为clip-path动画。虽然second是在DOM first之后出现的，但我可以看到hover动画。但是我看不到first的hover动画。所以我的想法是，每当我悬停first时，我也hover second悬停的数量first。所以基本上：

• hover first --> 扩大first的clip-path -->缩小second的clip-path
• hover second --> 扩大second的clip-path -->缩小first的clip-path

到目前为止，我尝试了+ connector，例如：

.first:hover + .second {
}

但是如果我悬停在first上，这将对second进行动画处理，所以这无济于事。有什么想法吗？

Answer 1

你的想法是对的：

.first:hover + .second {
    -webkit-clip-path: polygon(100% 0, 90% 0, 50% 100%, 100% 100%);
    clip-path: polygon(100% 0, 90% 0, 50% 100%, 100% 100%);
}

小提琴：https://jsfiddle.net/sb4bk0xg/3/