开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 9 天，点击查看活动详情
🍓 放大放小动画
我们需要做👉：
<!-- 盒子布局 -->
<div id="loading">
<div id="loading-center">
<div class="circle" id="circle_one"></div>
<div class="circle" id="circle_two"></div>
<div class="circle" id="circle_three"></div>
</div>
</div>
- 加载背景，设置一个盒子容器。
- 加载小盒子，三个小圆圈，位于屏幕垂直居中。
- 加载动画：运用transform属性的缩放值scale，由于都是缩小为小点，所以设置为
transform:scale(0)，后面两个小圈需要延迟，因为一开始加载的是第一个小圈，所以需要设置animation-delay秒数;
完整代码👉：
🍇 发散收缩动画
我们需要做：
-
8个小圈：像米字型四处散开，由于像米字形展开移动，通过
transform:translate(x,y)实现移动动画。 -
一个大圈：通过
transform:scale(0.5)实现圆圈放大放小动画。
完整代码👉：
🍏 左右相斥相融动画
- 左盒子：先右移，后缩小，再扩回圆形，由于都是正值。
- 右盒子：先左移，后缩小，再扩回圆形，由于都是负值。
完整代码👉：
🍑 旋转收缩动画
- 四个小圈展开：通过transform属性的translate进行移动实现动画。
- 四个小圈合并：通过transform属性的rotate进行旋转实现动画。
完整代码👉：
🍒 动态调整位置动画
我们需要做：通过小圆圈的三个状态实现滚动动画，如果我们通过慢速动画，我们会发现小圆圈从原始状态到椭圆形然后再到圆形，给我们造成一个滚动错觉：
// 滚动动画主要通过变化圆圈的宽高实现的
@keyframes circle{
0% { left: 100px; top:0}
80% { left: 0; top:0;}
85% { left: 0; top: -20px; width: 20px; height: 20px;}
90% { width: 40px; height: 15px; }
95% { left: 100px; top: -20px; width: 20px; height: 20px;}
100% { left: 100px; top:0; }
}
完整代码👉：
🍊 旋转放大放小动画
我们需要做：实现八个小圈，类似上面米字布局，然后通过scale属性实现小圈放大缩放动画。
完整代码👉：
🍍 音乐节奏动画
我们需要做：多个小长方形通过缩放属性scaleY实现纵向缩放，放大缩小。
完整代码👉：
🥭 三角形开花动画
我们需要做：使大三角形分割成多个小三角形，然后每个小三角形旋转180deg，由于这大三角形动画需要25个小三角形组成一共5层：
1 3 5 7 9，注意地，除了第一层，每层都会有旋转了180deg的三角形，这样才能像齿轮一样合并。
完整代码👉：
