使用动画和过渡属性在使用CSS的页面加载中创建淡入效果。
方法1：使用CSS动画属性：CSS动画由2个关键帧定义。一个将不透明度设置为0，另一个将不透明度设置为1。当动画类型设置为easy时，动画在页面中平滑淡入淡出。
此属性应用于body标签。每当页面加载时，都会播放此动画，并且页面看起来会淡入。可以在animation属性中设置淡入的时间。
代码如下：
body {animation: fadeInAnimation ease 3sanimation-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 effecton 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 effecton page load using CSS</b><p>This page will fade inafter 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 effecton 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 effecton page load using CSS</b><p>This page will fade inafter loading</p></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
