CSS3动画实现牛顿摆
开发工具与关键技术：DW JavaScript
作者：刘家龙
撰写时间：2019/1/18
今天让小编给了解一下如何用CSS3动画来完成一个简单的牛顿摆，相信大家对这个东西也不陌生，下面给大家展现一下效果图：
本来想搞一个动态图的，但由于时间关系就用静态图吧。整个过程是利用了transform的rotate属性设置div来实现的效果，左右两个球给了它们两个独立的关键帧，中间的五个小球也给了一个独立的关键帧来达到小球碰撞时的轻微晃动效果，代码下图：
这里为了让小球的摆动效果更真实，在最左最右和中间的五个球都在各个阶段设置了动画曲线，避免了小球全程匀速运动的僵硬效果。
最后要注意的设置包裹着球和线的div的旋转原点：
在这里插入图片描述
这里有因为图片太多有很多代码不能展示，如果有描述不清楚的还请见谅，这次的分享到此结束，谢谢观赏。