在加载页面上使用缓动使div幻灯片可见

Question

我希望有一个div (带有class="top")从顶部滑入：-300px；到顶部:40px；，并做一些很好的放松。我找不到任何例子。有没有人知道如何在加载页面上这样做？

Answer 1

下面是一些JavaScript和CSS3：

JavaScript：

<script>
document.getElementById("slide").style.top="40px";
</script>

和CSS：

-webkit-transition:all 1s;-ms-transition:all 1s;-moz-transition:all 1s;-o-transition:all 1s;-webkit-transition:all 1s;

要滑动的元素必须具有id " slide“。它还需要在CSS中使用top中的"position:absolute;top: -300px“才能使其成为-300px。您还可以在CSS中添加"left:20%;“或类似的内容，以使其看起来更好。任何与你的设计相匹配的东西。您应该查找有关CSS转换属性的信息。这对于特效来说是非常好的。在这种情况下，我让它在1秒内滑动。你可以随时改变它。

这也可以使用jQuery来实现，这是一个JavaScript库(它需要更少的代码)，但如果可以的话，我通常更喜欢常规的JavaScript和CSS。

下面是我在上面编写的代码的演示：jsFiddle。

哦，如果这个问题对你有帮助，请把它标记为答案。它会给我特权，并为我赢得更多的声誉。

希望这能有所帮助！