slide - Onload 页面通过缓动使 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 中具有“position:absolute;top:-300px”以使其成为 -300px。您也可以添加“left:20%;” 或者类似于 CSS 的东西，让它看起来更好。任何适合您的设计。您应该查找有关 CSS 过渡属性的信息。它非常适合特殊效果。在这种情况下，我让滑动需要 1 秒。你总是可以改变它。

这也可以使用jQuery来实现，这是一个 JavaScript 库（这将需要更少的代码），但如果我能提供帮助，我通常更喜欢常规的 JavaScript 和 CSS。

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

哦，如果对您有帮助，请将此问题标记为答案。它会给我特权并为我赢得更多声誉。

希望这有帮助！