Question

有人可以帮我理解，使用CSS，我可以在悬停时同时旋转和更改图像吗？当用户将鼠标悬停在图像上时，我想要开始旋转并在旋转中间更改图像。到目前为止，我有以下内容，但我无法弄清楚如何在悬停时延迟图像更改。

gets

Answer 1

您只需要将background-image添加到transition规则。

在这个例子中，我还使用一个容器元素来触发悬停（否则交互区域会随着图像一起旋转，如果光标被捕到，就会引起急动，比如移动角落）。

＆＃13;

.image-swap-container {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.image-swap {
    background-repeat: no-repeat;
    background-image: url("http://placehold.it/300x300/ff0000");
    border-radius: 50%;
    height: 300px;
    width: 300px;
    transform: none;
    transition: transform 1s, background-image 1s;
}

.image-swap-container:hover {
    cursor: pointer;
}

.image-swap-container:hover .image-swap {
    background: url("http://placehold.it/300x300/00ff00");
    transform: rotateZ(360deg);
}

＆＃13;

<div class="image-swap-container"><div class="image-swap"></div></div>

＆＃13;

CSS同时旋转和替换图像

1 个答案: