Question

我有一个想要实现的效果，但我很难想到如何实现它。以下是一些图像，显示了我想要实现的效果的进展：http://imgur.com/a/In6IK

基本上，我有多个包含文本的幻灯片，我想逐个自动显示。为了隐藏当前幻灯片并显示下一张幻灯片，我想要一个图像（位于文本的左侧）向右滑动，覆盖/隐藏文本，然后当它滑回到它的原始位置，显示下一张幻灯片的文本。

那么我将如何实现这一效果？

Answer 1

这是一个原始想法。也许您可以使用:after和:before并对其进行定位，以便隐藏文字，使其消失。

HTML就像：

<div class="main">
  <div class="over"></div>
  <div class="text">This is some text</div>
</div>

对于CSS来说，请看这个小提琴http://jsfiddle.net/Zs2MU/

也许它可以帮助你处理你的情况。

UPD 以下是支持多行文字的更新解决方案http://jsfiddle.net/Zs2MU/2/