平常做网站的时候容易遇到代码长,加载可能需要时间,而客户可能又不愿意等待,可能会不耐烦
这时候我们就需要一个高大上的加载动画告诉客户:这个网站正在加载,请先不要离开
我给大家制作了代码,里面图片的链接可以自行更改:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>欢迎来到学而思编程</title>
</head>
<body>
<!--loading page-->
<div class="loader">
<div class="loader-content">
<img src="https://livefile.xesimg.com/programme/python_assets/7579df465659ffa62c2c7b9ebcb418e1.jpg" alt="Loader" class="loader-loader" />
</div>
</div>
<!--content page-->
<div class="content">
</div>
<style>@charset "UTF-8";
.loader {
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
background: #000;
text-align: center;
/* loader页面消失采用渐隐的方式*/
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}
/* 使用base64编码嵌入加载的logo */
.loader-content {
background:url();
background-size: 123px 38px;
display: block;
position: relative;
padding-top: 50px;
top: 45%;
}
.fadeout {
opacity: 0;
filter: alpha(opacity=0);
}
/* logo出现动画 */
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);</style><script>window.onload = function(){
setTimeout(function(){
var loader = document.getElementsByClassName("loader")[0];
loader.className="loader fadeout" ;//使用渐隐的方法淡出loading page
setTimeout(function(){loader.style.display="none"},1000)
},1000)//强制显示loading page 1s
}</script>
</body>
</html>