推小球动画

开发工具与关键技术：前端

作者：黄志鹏

撰写时间：2019/1/30

在前端css3中提供了很强大的animation动画，它可以指定多个关键帧，从而允许定义更加丰富的自定义动画

下面我们来用纯css做一个推动小球的动画，首先我们先布局，在一个div里放五个子元素,这五个子元素代表的是推动小球的柱子，再加一个大的div，这个div代表小球。然后整体布局就是这样了。

代码如下

然后我们对这五个子元素设置宽高和外边距，使其并排在一起，

  如图

随后我们想要每一条柱子以先后顺序来推动小球，这时我们要调用关键帧，

我们先来写五条柱子的关键帧，这时我们要注意的是要对柱保持在原来的位置，

就要控制好他的上边距。在使其的高度改变，让其看起来有压缩的效果。

然后我们再调用小球的关键帧，让其顺着柱子的高度改变而改变。

代码如下

浏览器输出结果