前端实现页面加载动画

目录

前言

一、效果演示

二、实现思路 

三、具体代码

总结 

---

前言

  我们平时在访问一些网站的时候，如果碰到网络状态不太通畅的情况，总会有一个圆圈在转，这样一个加载的动画效果是怎么实现的呢？

一、效果演示

二、实现思路 

  首先，我们需要用一个div标签覆盖整个页面，然后将其透明度调低，这样做的目的是用一层标签将内容区域挡住，防止还没加载完成有些地方就被误触。然后我们需要找一张显示加载的jpg或者png格式的图片，让图片居中显示，并处在屏幕高度的一半。我们再给这张图片添加css样式，绑定动画效果，使其绕自己圆心转动起来即可。

三、具体代码

  在编码时，我们应该在最开始的时候就养成好的习惯，学会分文件进行操作，并注意命名的规范性与易读性。以下是简单的文件目录结构：

  在index.html中，用一个div标签包裹一个img标签，我们将div的class命名为loadBackGround，src的class命名为load。此外，在img中用src指定图片的路径。具体代码如下：

  在css中，我们来丰富html骨架的外表。首先，对于div标签，我们利用absolute进行绝对定位，让它顶部的距离为0，并设置器宽度填满屏幕，高度与屏幕高度一致。与此同时，利用opacity设置器透明度，text-align设置子标签img居中对齐。对于img标签，我们也设置其绝对定位，并设置其动画时间，而它变化的是Z轴的角度，0度到360度。具体代码如下：

/* 显示加载场景 */
.loadBackGround{
    position: absolute;
    top: 0px;
    text-align: center;
    width: 100%;
    height: 100vh;
    background-color: #efefef;
    opacity: 0.6;
}

/* 加载动画 */
.load{
    position: absolute;
    top: 50vh;
    width: 50px;
    animation-name: loading;
    animation-timing-function:linear;
    animation-duration:1.5s;
    animation-iteration-count:infinite;
}

@keyframes loading {
    from{
       transform: rotateZ(0deg);
    }
    to{
       transform: rotateZ(360deg);
    }
}

  与动画有关的css知识，我们可以参考这位博主的文章，写的非常详细：

css动画（详解带图）-CSDN博客

总结 

  总的来说，页面的加载动画只是一个小demo，在开发当中，我们用到的更多的可能是框架，用来实现这种效果的代码肯定不一样。所以，前路漫漫，我们更需要认真学习，努力成为更好的自己！