HTML加载中的动画

最新推荐文章于 2024-05-03 14:55:36 发布

CZ工作室官方

最新推荐文章于 2024-05-03 14:55:36 发布

阅读量250

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/chenzhi0122/article/details/131156029

版权

平常做网站的时候容易遇到代码长，加载可能需要时间，而客户可能又不愿意等待，可能会不耐烦

这时候我们就需要一个高大上的加载动画告诉客户：这个网站正在加载，请先不要离开

我给大家制作了代码，里面图片的链接可以自行更改：

<!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>