Question

我有一个全屏叠加，我现在在jfiddle设置它所以它只是淡入 http://jsfiddle.net/9NJP9/1/ 我喜欢它而不是褪色是从屏幕顶部向下到底部的动画;滑下来。虽然我不想让它从整个网站的顶部一直滑到页面底部，只是从屏幕顶部到我的网站，但我的网站比屏幕高度更长。屏幕的底部，然后即使有人滚动，也会留在那里。我只是不确定如何操纵css来做到这一点。

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

Answer 1

此处http://jsfiddle.net/9NJP9/8/

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

.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。它让生活更舒适。：）

从顶部制作全屏div动画

1 个答案: