Question

我正在尝试使用CSS3及其“过渡”和“目标”功能为一种幻灯片放映动画。

使用CSS：

[id*=thumbs] {
    position: relative;
    left: 0px;
    top: 0px;
    -webkit-transition: all 1s;
    transition: all 1s;
}

[id*=thumbs]:target {
    position: relative;
    top: -100px;
}

#body {
    position:relative;
    left: 0px;
    top: 0px;
    height: 500px;
    width: 600px;
    overflow:hidden;
}

HTML：

<div style="position:absolute; top:200px; left:200px;width:600px;">
<p align="center"><a href="#thumbs">up</a>
<div id="body">
<table width="580" border="0" cellpadding="5" id="thumbs">
  <tr>
    <td><img src="" width="100%" height="160"  /></td>
    <td><img src="" width="100%" height="160"  /></td>
  </tr>
  <tr>
    <td><img src="" width="100%" height="160"  /></td>
    <td><img src="" width="100%" height="160"  /></td>
  </tr>
  <tr>
    <td><img src="" width="100%" height="160"  /></td>
    <td><img src="" width="100%" height="160"  /></td>
  </tr>
  <tr>
    <td><img src="" width="100%" height="160"  /></td>
    <td><img src="" width="100%" height="160"  /></td>
  </tr>
</table>
</div>
</div>

但是，我只能进行一次转换。我希望能够再次单击“向上”并让它向上移动一些。有什么方法可以做到吗？

提前致谢！

Answer 1

这是一个使用translate的非常简单的例子。它可以在没有任何JavaScript的情况下实现您想要的功能。

查看：http://www.designmadeingermany.de/slideshow/

浏览源代码，明确其内容。

用一个目标（CSS3）过渡两次

1 个答案: