Html 如何制作css动画

我有两张图片和一个背景： （红色和棕色是图像）

（白色为背景）

当我将鼠标悬停在第一个或第二个图像上时，它将向左/向右滑动。就像商店里的门。同时滑动两个（不是只有一个）

---

有人能帮我吗？谢谢。

这是我的快速解决方案。它并不完美，也许其他人可以对它进行微调——但它确实有效。Javascript/jQuery可能允许您提出更完整的解决方案

希望这有帮助

.l，
r{
-webkit过渡：宽度.35s，易于输入输出；
过渡：宽度。35s缓进缓出；
宽度：200px；
高度：100px；
}
.集装箱{
宽度：400px；
}
l{
背景色：红色；
浮动：左；
}
r{
背景颜色：棕色；
浮动：对；
}
.容器：悬停分区{
宽度：150px；
}

---

这是我快速而肮脏的解决方案。它并不完美，也许其他人可以对它进行微调——但它确实有效。Javascript/jQuery可能允许您提出更完整的解决方案

希望这有帮助

.l，
r{
-webkit过渡：宽度.35s，易于输入输出；
过渡：宽度。35s缓进缓出；
宽度：200px；
高度：100px；
}
.集装箱{
宽度：400px；
}
l{
背景色：红色；
浮动：左；
}
r{
背景颜色：棕色；
浮动：对；
}
.容器：悬停分区{
宽度：150px；
}

---

我尝试了公认的答案，但如果你把光标放在中间，它会来回弹跳，无法打开，这就有点问题了（在firefox中更是如此）。就我个人而言，我会做更多类似的事情

#阶段{
宽度：20雷姆；
高度：15雷姆；
背景：绿色；
边框：黑色1px实心；
保证金：0自动；
位置：相对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
光标：指针；
}
跨度{
颜色：白色；
字体大小：150%；
}
#左帘，#右帘{
位置：绝对位置；
排名：0；
底部：0；
宽度：10雷姆；
-webkit过渡：所有1s轻松；
过渡：所有的1容易；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#左帘{
背景：红色；
左：0；
}
#右幕{
背景：蓝色；
右：0；
}
#舞台：悬停#左幕布{
左：-10雷姆；
}
#舞台：悬停#右幕{
右：-10雷姆；
}

偷偷摸摸！
老鼠
结束

我尝试了公认的答案，但如果你把光标放在中间，它会来回弹跳，无法打开，这就有点问题了（在firefox中更是如此）。就我个人而言，我会做更多类似的事情

#阶段{
宽度：20雷姆；
高度：15雷姆；
背景：绿色；
边框：黑色1px实心；
保证金：0自动；
位置：相对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
光标：指针；
}
跨度{
颜色：白色；
字体大小：150%；
}
#左帘，#右帘{
位置：绝对位置；
排名：0；
底部：0；
宽度：10雷姆；
-webkit过渡：所有1s轻松；
过渡：所有的1容易；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#左帘{
背景：红色；
左：0；
}
#右幕{
背景：蓝色；
右：0；
}
#舞台：悬停#左幕布{
左：-10雷姆；
}
#舞台：悬停#右幕{
右：-10雷姆；
}

偷偷摸摸！
老鼠
结束

您尝试过哪些编码不起作用？请发布你现有的努力，这样我们可以帮助你提高你的能力。伙计，如果你已经成为一名活跃会员一年了，你现在应该知道，人们通常希望看到你自己的一些小小的尝试，而不是仅仅为你做工作。我们是来互相帮助的，但不是免费的代码服务。对吧？你试过什么编码没用？请发布你现有的努力，这样我们可以帮助你提高你的能力。伙计，如果你已经成为一名活跃会员一年了，你现在应该知道，人们通常希望看到你自己的一些小小的尝试，而不是仅仅为你做工作。我们是来互相帮助的，但不是免费的代码服务。对吗？这张好得多，但有一个问题就是我需要改变图片的大小（红色/蓝色），就像一个向上的答案一样PIt只是一个概念性的例子。现在你有了一个起点，请在单独的问题中回答具体问题。这一个好得多，但有一个问题是我需要更改图像的大小（红色/蓝色），就像一个向上的答案一样：PIt只是一个概念性的例子。现在你已经有了一个起点，请在单独的问题中回答具体问题。