一分钟学会制作网页动画 #如何破解结构性就业矛盾

前端八哥动画案例。

1. 今天花 1 分钟带大家学一下网页小案例的制作。首先这里是补一个之前 CSS 知识点的遗漏，那就是大家能看到的动画。大家可以先思考 3 秒钟，然后我再来给大家分享一下实现动画的思路。

2. 布局：先做一个拆解，要实现动画首先得实现它的基础布局。这个布局分为几个元素，一个是矩形，还有四个小的圆形。这个圆形大家可以细心观察一下，它是彩色的，并不是纯色的，所以这是实现布局的细节。写布局的时候一般都是实现到动画第一帧的位置，这样方便后续的动画来执行。但是动画的第一帧在哪里？现在这个球并没有结束，它是一直在滚动的。在不动代码的情况下可以通过刷新，一直刷新来确定一下。可以看到这四个小球都在轨处了，但是它们的初始位置都分别在矩形的四个角。动画第一帧的位置大概已经知道了，基础布局就不说了。

3. 动画轨迹：再看动画的轨迹，可以看一个小球就能知道所有的了。其中一个小球是从这个位置走到这里，再从这走到这里，再从这里再往上走，再从上面再往左走，最后走到起始点。但是动画到现在为止依然没有停止，它是无限循环的在这执行，所以这需要涉及到 CSS 的动画属性。

4. 到这里已经说完了动画 90%的部分，因为在日常工作的时候写一个代码都是思考了 90%的实现功能，剩下 10%的时间再把代码来实现一下。

相信大家已经知道动画怎么能实现了，大家可以实践操作一下。有什么问题可以给我留言。程序员，点赞关注不迷路。