css - 使全屏 div 从顶部向下动画

Question

我有一个全屏覆盖，我目前在 jfiddle 中设置了它，所以它只是淡入 http://jsfiddle.net/9NJP9/1/ 我想要它做的而不是淡入淡出是从顶部动画屏幕向下到底部；滑下来。我的网站比屏幕高度长，当单击按钮时，虽然我真的不希望它从整个网站的顶部一直滑到页面底部，只是从屏幕顶部滑到屏幕底部，然后即使有人滚动也停留在那里。我只是不确定如何操纵 css 来做到这一点。

我能得到的任何帮助都会很棒，谢谢。

Answer 1

在这里，http://jsfiddle.net/9NJP9/8/

对于向下滑动效果，您可以将属性从或更改为 ，而不是opacity从 0 更改为 1 。在小提琴中，我将其设置为从 过渡到. 此外，您需要使效果跨浏览器兼容，而不是仅用于 webkit 浏览器的 CSS 。我已经相应地修改了 CSS。top-500px-50%0-100%0

.fullscreen_hide {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;

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

    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    position: absolute;
    z-index: 1000;
    height: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    top: -100%;
    bottom: 0;
    right: 0;
    left: 0;
    background: #141414;
}

.fullscreen_show {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;

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

    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    position: absolute;
    height: 100%;
    z-index: 1000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #141414;
}

正如@MichaelGiovanniPumo 指出的那样，您也应该尝试使用jQuery。它使生活更加舒适。:)