HTML使用CSS3animation结合transform制作趣味loading加载动画

年初成为逆战班的一员，在严重的疫情形势下开始学习HTMLcss，突然想起来一个有很意思的loading加载动画，自己临摹了实践了一下，睡不着可以看看

关于animation动画和transform变形的使用。

(1)首先先简单了解一下animation和transform的几种属性：

animation：none 0 ease 0 1 normal(默认值)；

animation-name (name)----------------指定要绑定到选择器的关键帧的名称

animation-duration (time) ------------动画指定需要多少秒或毫秒完成

animation-timing-function()----设置动画将如何完成一个周期
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay (time s)-----------------设置动画在启动前的延迟间隔。

animation-iteration-count------定义动画的播放次数。
n 一个数字，定义应该播放多少次动画
infinite 指定动画应该播放无限次（永远）

transform：
scale(x[,y]?) 定义 2D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度
translate(x,y) 定义 2D 位移转换。
///
在使用transform变形时一定要注意同时定义位移、旋转和缩放时会影响translate属性transform: translateY(5px） rotate(45deg); transform: rotate(45deg) translateY(5px）;执行该样式时，前者元素会先进行旋转在进行Y轴方向的移动；而后者则会向45度角方向移动，移动的方向会受到旋转角度的影响。话不多说先看一下animation和transform能够实现的loading动画效果：

本次将会对下面的动画效果进行演示附上链接加载动画链接（因为没有gif图片）（https://www.typingclub.com/sportal/program-3.game）：
话不多说，直接上代码
css部分:

}

*{
    margin:0;
   padding:0;
}
body{
   
    height:100%; 
    background:#f6f6f6;
}
/* 定义外部盒子大小 */
.box{
    
    width:300px