整体代码

HTML 实现自定义加载动画，话不多说如下代码所示：



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html自定义加载动画</title>
    <style type="text/css">
        html,body{
            margin: 0;
            padding: 0; 
        }
        .loading{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
            animation: loading 2s linear infinite;
        }

        .loading img{
            width: 100px;
            height: 100px;
        }
        @keyframes loading {
            from{
                transform: rotate(0);
            }
            to{
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="loading">
        <!-- 我是自定义加载动画 -->
        <img src="./images/loading.png" alt="">
    </div>
</body>

</html>


代码解释



html,body{
     margin: 0;
     padding: 0; 
}


 如上，去掉浏览器给页面设置的默认边距



.loading{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  animation: loading 2s linear infinite;
}


 

 给 class 为 loading 的标签居中显示和动画。



.loading img{
  width: 100px;
  height: 100px;
}


 

调整 loading 下图片的大小。



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


 

 设置名称为 loading 的动画，动画从 0° ~ 360°，转一圈。

 后记

在编程当中，任何你看上去酷炫或者高大上的效果都是基础的东西实现的。我们老师也经常给学员强调，基础一定要打好，不要去盲目的追求高大上的写法。有些人，基础都没有学完就着急去学框架的内容，框架固然重要，但是基础的东西你没有学完，就注定了你没有发展前景。如果那一天 VUE、React 和 Angular 这些框架被新出来的框架淘汰了，那么你又要花很长时间去学习新的框架。这样的人才不是企业所需要的，可替代性太强，随便花一两个月就能教出一个会使用框架的人。但是若是你基础知识扎实，那么就能很平滑的对接任何框架，所花的学习成本也会很低，基本都能够快速上手。

其实多年开发经验的老鸟们都明白，编程到最后不是说你会多少框架，而是你对基础知识的理解和运用的程度。老鸟们都明白，最基础的东西最难。就跟金庸武侠中描述的那样，往往高手的最高境界是返璞归真，不会去追求招式的华丽，也不会追求厉害的武器。我们学这些技能的目的是什么？实现效果，解决问题。直达问题本质，实现一招制敌，这才是我们应该追求的。