![8328d57f437c553807435349d4f32719.gif](https://img-blog.csdnimg.cn/img_convert/8328d57f437c553807435349d4f32719.gif)
大家好,我是你们的导师,我每天都会在这里给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈)。上次老师跟大家分享了CSS 之创建图像叠加图标的知识,今天跟大家分享下CSS 之页面加载时创建淡入效果的知识。
1 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;
}
}
例:
How to create fade-in effect
on page load using CSS
body {
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
GeeksForGeeks
How to create fade-in effect
on page load using CSS
This page will fade in
after loading
![a89f1dd0b5a2655d8907459fc7fb3b29.png](https://img-blog.csdnimg.cn/img_convert/a89f1dd0b5a2655d8907459fc7fb3b29.png)
![e672d544b7245eb39e4d9b0ca762ebd7.gif](https://img-blog.csdnimg.cn/img_convert/e672d544b7245eb39e4d9b0ca762ebd7.gif)
方法2:使用过渡属性,并在加载主体时将不透明度设置为1:在此方法中,可以将主体初始设置为不透明度0,并且每当更改该属性时,过渡属性都将用于为其设置动画。
加载页面时,使用onload事件将不透明度设置为1。由于transition属性,现在更改不透明度将在页面中消失。淡入的时间可以在transition属性中设置。
代码如下:
body {
opacity: 0;
transition: opacity 5s;
}
例:
How to create fade-in effect
on page load using CSS
body {
opacity: 0;
transition: opacity 3s;
}
GeeksForGeeks
How to create fade-in effect
on page load using CSS
This page will fade in
after loading
输出:
![e672d544b7245eb39e4d9b0ca762ebd7.gif](https://img-blog.csdnimg.cn/img_convert/e672d544b7245eb39e4d9b0ca762ebd7.gif)
参考文献:https://www.geeksforgeeks.org/
好了,今天技术部分就讲到这里。
还有一个重要的事,我们现在已开放对外招导师。工资还可以,大概15K-25K,点击下面【
链接
】有详细介绍!(注意!每期我们只招1个人!)
15K~25K招聘导师若干名
![ad3ba9d4d1b17b513409d07b035b990d.gif](https://img-blog.csdnimg.cn/img_convert/ad3ba9d4d1b17b513409d07b035b990d.gif)