阅读它以后用CSS3和HTML5或JS滑动

Question

是否有人知道如何使用CSS3或JS在“Read it Later”应用程序中使幻灯片向左效果？

onclick - ＆gt;向左滑动整个div并在滑动的那个下面显示div。

这是一段带有示例的视频：READ IT LATER

Answer 1

可能是你想要的css3。 的 CSS

.parent{
    width:300px;
    border:1px solid red;
    height:100px;
    position:relative;
}
.box{
    width:40px;
    height:40px;
    background:green;
    display:block;
    z-index:0;
}
.slider{
    width:300px;
    background:#454545;
    color:#fff;
    font-weight:bold;
    font-size:24px;
    height:100px;
    position:absolute;
    top:0;
    right:300px;
    transition: right 1s ease;
    -moz-transition: right 1s ease; /* Firefox 4 */
    -webkit-transition:right 1s ease; /* Safari and Chrome */
    -o-transition:right 1s ease; /* Opera */
    z-index:1;
}
.box:focus + .slider,.box:active + .slider{
    right:0;
}

<强> HTML

<div class="parent">
    <a href="#" class="box"></a>
    <div class="slider">hello</div>
</div>

选中此http://jsfiddle.net/MhHx2/

<强>已更新

http://jsfiddle.net/MhHx2/4/

Answer 2

您可以通过使用几种标准技术来实现这一效果。

1. 创建两个div元素，一个用于将要滑出的元素，另一个用于将要显示的元素。
2. 使用z-index定位它们。请注意，div必须使用absolute，relative或fixed进行定位才能实现此目的。
3. 你可以使用jQuery来实现效果。我发现了一篇不错的帖子here。

那应该让你完成。