用css3的animation动画属性实现网页的淡入,主要点在于改变页面的opacity属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
@keyframes fadein{
0%{opacity: 0;
}
100%{
opacity: 1;
}
}
@-webkit-keyframes fadein{
0%{opacity: 0;
}
100%{
opacity: 1;
}
}
@-moz-keyframes fadein{
0%{opacity: 0;
}
100%{
opacity: 1;
}
}
@-o-keyframes fadein{
0%{opacity: 0;
}
100%{
opacity: 1;
}
}
@-ms-keyframes fadein{
0%{opacity: 0;
}
100%{
opacity: 1;
}
}
body{
animation:fadein 5s linear 1;
-webkit-animation:fadein 5s linear 1;
-moz-animation:fadein 5s linear 1;
-o-animation:fadein 5s linear 1;
-ms-animation:fadein 5s linear 1;
}
</style>
<body>
CSS3 实现网页的淡入效果
</body>
</html>