javascript - 在 CSS 中使用动画内容的幻灯片

Question

我有一个包含 3 张图片的幻灯片。对于我需要在图像顶部添加一些内容的每张图像，文本需要从右向左移动，并在 3 秒内消失。然后它会滑到第二张图片，我必须再次从右到左显示内容，这次在文本后面有一个背景框。

如何在css 中制作这种动画？此外，此 slider 需要兼容所有浏览器。

谁能给我一个提示？

提前致谢。

Answer 1

您完全可以使用 CSS 制作那种动画，但您必须使用 javascript 来触发动画。您所说的方法不适用于所有浏览器。如果您可以为您的元素使用 jQuery，那么您可以使用动画功能。此外，它基本上兼容人们使用的所有浏览器。

对于 CSS 方法，您将使用 animation 属性，如下所示

@keyframes {
    from { color: #fff; } to { color: #000; }
}
@-webkit-keyframes {
    from { color: #fff; } to { color: #000; }
}
.myanimatedclass{
    animation: myanimation 2s ease-in;
    -webkit-animation: myanimation 2s ease-in;
}

对于 jQuery 方法，请查看 jQuery 的动画功能。你会找到你需要的一切。 https://api.jquery.com/animate/