Html 动态更改图像的内容/src

我正在尝试只使用HTML和CSS/CSS3创建一个简单的动画

现在我正在阅读一些CSS3格式。 我能够创建这个演示

现在这只是一个普通的悬停动画，它将图像旋转180度，持续2秒

现在我尝试将CSS中的

content:url

属性添加到

'：hover'

部分，这样当图像翻转时，图像的源应该改变。但是，如果我尝试此操作，它将不起作用，动画也将失败

这可以只使用CSS和HTML完成，还是必须使用javascript/jQuery

CSS

---

您可以使用2个div（背面和正面）来实现这一点，并在旋转时交换它们：

HTML

<div class="hover panel">
    <div class="front"></div>
    <div class="back"></div>
</div>

<div id="card"></div>

交替过渡法 一种更简单的方法是使用延迟将背景图像过渡到旋转过渡的中间位置

HTML

<div class="hover panel">
    <div class="front"></div>
    <div class="back"></div>
</div>

<div id="card"></div>

---

内容

仅适用于伪元素（如

:after

）-不能仅使用css更改

src

属性。您可以做的是更改悬停时的

内容

，但是：我尝试了这种方法。现在，图像会更改，但不会应用过渡。首先，使用背景而不是内容：我检查了这把小提琴。看起来不错。但是，只要div悬停在上面，图像就会改变，然后，我不希望反转结束图像。有什么解决办法吗？我假设你想要一个翻转卡片类型的效果，看看我发现2 divs解决方案更好。另一种解决方案是将卡反转。