CLICK HERE

html自定义加载动画

整体代码

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 这些框架被新出来的框架淘汰了,那么你又要花很长时间去学习新的框架。这样的人才不是企业所需要的,可替代性太强,随便花一两个月就能教出一个会使用框架的人。但是若是你基础知识扎实,那么就能很平滑的对接任何框架,所花的学习成本也会很低,基本都能够快速上手。

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

 

posted @ 2021-07-26 15:33  学致私教  阅读(455)  评论(0编辑  收藏  举报