代码之家 › 专栏 › 技术社区 › greedsin

具有片段路径的图像动画

css-transitions css

greedsin · 技术社区 · 7 年前

以下是我的问题演示: Demo

我有两个 absolute 图像及其动画 clip-path . 虽然 second 紧随其后 first 在 DOM 我可以看到 hover 动画但我看不到 悬停 的动画 第一 . 所以我的想法是每当我悬停 第一 我也 悬停 第二 按金额 第一 悬停。所以基本上:

hover first --&燃气轮机;扩大 剪辑路径 属于 第一 --&燃气轮机;收缩 剪辑路径 属于 第二
hover second --&燃气轮机;扩大 剪辑路径 属于 第二 --&燃气轮机;收缩 剪辑路径 属于 第一

到目前为止,我尝试了 + connector ,例如:

.first:hover + .second {
}

但这将使 第二 如果我悬停 第一 ,因此这没有帮助。有什么想法吗?

1 回复 | 直到 7 年前

Kosh 7 年前

你的想法是对的:

.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/