2020-05-26——如何使用CSS在页面加载时创建淡入效果？

使用动画和过渡属性在使用CSS的页面加载中创建淡入效果。

方法1：使用CSS动画属性：CSS动画由2个关键帧定义。一个将不透明度设置为0，另一个将不透明度设置为1。当动画类型设置为easy时，动画在页面中平滑淡入淡出。

此属性应用于body标签。每当页面加载时，都会播放此动画，并且页面看起来会淡入。可以在animation属性中设置淡入的时间。

代码如下：

body { 
    animation: fadeInAnimation ease 3s 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
}
@keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
     } 
}

例：

<!DOCTYPE html> 
<html>
<head> 
    <title> 
        How to create fade-in effect 
        on page load using CSS 
    </title>
    <style> 
        body { 
            animation: fadeInAnimation ease 3s; 
            animation-iteration-count: 1; 
            animation-fill-mode: forwards; 
        } 
        @keyframes fadeInAnimation { 
            0% { 
                opacity: 0; 
            } 
            100% { 
                opacity: 1; 
            } 
        } 
</style> 
</head>
<body> 
    <h1 style="color: green"> 
        GeeksForGeeks 
    </h1>
    <b> 
        How to create fade-in effect 
        on page load using CSS 
    </b>
    <p> 
        This page will fade in 
        after loading 
    </p> 
</body>
</html>

方法2：使用过渡属性，并在加载主体时将不透明度设置为1：在此方法中，可以将主体初始设置为不透明度0，并且每当更改该属性时，过渡属性都将用于为其设置动画。

加载页面时，使用onload事件将不透明度设置为1。由于transition属性，现在更改不透明度将在页面中消失。淡入的时间可以在transition属性中设置。

代码如下：

body { 
    opacity: 0; 
    transition: opacity 5s; 
}

例：

<!DOCTYPE html> 
<html>
<head> 
    <title> 
        How to create fade-in effect 
        on page load using CSS 
    </title>
    <style> 
        body { 
            opacity: 0; 
            transition: opacity 3s; 
        } 
</style> 
</head>
<body onload="document.body.style.opacity='1'">
    <h1 style="color: green"> 
        GeeksForGeeks 
    </h1>
    <b> 
        How to create fade-in effect 
        on page load using CSS 
    </b>
    <p> 
        This page will fade in 
        after loading 
    </p> 
</body>
</html>

相关文章