整体代码
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 这些框架被新出来的框架淘汰了，那么你又要花很长时间去学习新的框架。这样的人才不是企业所需要的，可替代性太强，随便花一两个月就能教出一个会使用框架的人。但是若是你基础知识扎实，那么就能很平滑的对接任何框架，所花的学习成本也会很低，基本都能够快速上手。
其实多年开发经验的老鸟们都明白，编程到最后不是说你会多少框架，而是你对基础知识的理解和运用的程度。老鸟们都明白，最基础的东西最难。就跟金庸武侠中描述的那样，往往高手的最高境界是返璞归真，不会去追求招式的华丽，也不会追求厉害的武器。我们学这些技能的目的是什么？实现效果，解决问题。直达问题本质，实现一招制敌，这才是我们应该追求的。