css怎么创建CSS在页⾯加载时创建淡⼊效果
CSS如何在页⾯加载时创建淡⼊效果？下⾯本篇⽂章就来给⼤家介绍⼀下使⽤CSS在页⾯加载时创建淡⼊效果的⽅法，希望对⼤家有所帮助。
想要使⽤CSS在页⾯加载上创建淡⼊效果，可以使⽤css的animation属性或transition属性在页⾯加载时创建淡⼊效果。下⾯就来通过⽰例来介绍⼀下。
⽅法1：使⽤CSS animation属性
通过2个关键帧来定义CSS动画：⼀个不透明度设置为0，另⼀个不透明度设置为1。此属性应⽤于body标记；当动画的类型设置为ease时，动画会在页⾯中平滑淡⼊。每当页⾯加载时，这个动画就会播放，页⾯就会出现淡⼊。淡⼊的时间也可以在动画属性中设置。
语法：
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>
<meta charset="UTF-8">
<title>如何使⽤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 > Hello world!</h1>
<b> 使⽤CSS在页⾯加载时创建淡⼊效果</b>
<p>加载后此页将淡⼊</p>
效果图：
⽅法2：使⽤“Transition”属性并在加载页⾯时将“Opacity”设置为1
⾸先将body的opacity属性设置为0，并且每次更改该属性时，都使⽤“transition”属性使其具有动画效果。然后在加载页⾯时，使⽤onload事件将opacity属性设置为1。由于“transition”属性，现在更改opacity属性将在页⾯中显⽰为淡⼊淡出。淡⼊的时间可以在transition属性中设置。
语法：
body {
opacity: 0;
transition: opacity 5s;
}
⽰例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>如何使⽤CSS在页⾯加载时创建淡⼊效果</title>
<style>
body {
opacity: 0;
transition: opacity 5s;
</head>
<body onload="document.body.style.opacity='1'">    <h1 > Hello world!</h1>
<b> 使⽤CSS在页⾯加载时创建淡⼊效果</b>
<p>加载后此页将淡⼊</p>
</body>
</html>
效果图：
更多前端开发知识，请查阅 HTML中⽂⽹ ！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。