2

寻找一个炫酷、流畅的轻量级CSS3页面淡入淡出过渡效果。

只需要支持 IE 10，因为我想在Windows Metro App中使用它WebView中使用它（这是一个从 IE 10 派生的轻量级浏览器控件）。

转换必须在页面加载时触发。

我想要与此相同的效果：http: //ie.microsoft.com/testdrive/Graphics/FullPageAnimations/1_Introduction.html

4

3 回答 3

1

找到了一种干净且简单的方法：

头

body
{
   opacity: 0;
   transition: all 1s ease;
}

.loaded
{
   opacity:1;
}

身体

<body onload="document.body.classList.add('loaded');">
于 2013-06-16T11:18:12.933 回答
0

对于纯 CSS3，您可以执行以下操作，尽管您不一定需要在 body 和 div 上都播放效果。div 就足够了。

CSS

body {
    animation: fadein 2s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#FadeOut {
    width: 100%;
    height: 100%;
    position: absolute;
    animation: fadeout 2s;
}

@keyframes fadeout {
    from {
        opacity:1;
        background-color: blue;
    }
    to {
        opacity:0;
    }
}

HTML

<div id="FadeOut"></div>
<div id="test">This is text in a div underneath the blue div.</div>
于 2013-06-15T17:47:42.907 回答
0

正在加载页面时淡入，当要卸载页面时淡出！

将此代码放在页面的 <head> 中。

<style>
    @keyframes page_transition
    {   
        from {opacity: 0;}
        to {opacity: 1;}
    }
    @-webkit-keyframes page_transition
    {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    html
    {
        animation: page_transition 1s ease-in-out;
        -webkit-animation: page_transition 1s ease-in-out;
    }
    html.unloading
    {
        transition: opacity 500ms linear !important;
        opacity: 0 !important;
    }
</style>
<script>
    window.addEventListener("beforeunload", function() {
            document.documentElement.classList.add("unloading");
        });
</script>
于 2016-12-01T04:32:57.873 回答