html⾃定义加载动画整体代码
HTML 实现⾃定义加载动画，话不多说如下代码所⽰：
<!DOCTYPE html>
<html lang="en">
<head>
html动画效果<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 这些框架被新出来的框架淘汰了，那么你⼜要花很长时间去学习新的框架。这样的⼈才不是企业所需要的，可替代性太强，随便花⼀两个⽉就能教出⼀个会使⽤框架的⼈。但是若是你基础知识扎实，那么就能很平滑的对接任何框架，所花的学习成本也会很低，基本都能够快速上⼿。
其实多年开发经验的⽼鸟们都明⽩，编程到最后不是说你会多少框架，⽽是你对基础知识的理解和运⽤
的程度。⽼鸟们都明⽩，最基础的东西最难。就跟⾦庸武侠中描述的那样，往往⾼⼿的最⾼境界是返璞归真，不会去追求招式的华丽，也不会追求厉害的武器。我们学这些技能的⽬的是什么？实现效果，解决问题。直达问题本质，实现⼀招制敌，这才是我们应该追求的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。