CSS 实现小球的曲线运动

CSS 实现小球的曲线运动

方法一：使用 animation 动画

将不同的两个方向的 animation 结合起来，就可以实现曲线运动的功能

向右的 animation + 向上的 animation = 向右向上的曲线运动

效果：

关于贝塞尔曲线 (cubic-bezier)

贝塞尔曲线就是速度曲线

用来描述小球运动过程中的速度，比如先快后慢、先慢后快…

使用样式：transition: all 2s cubic-bezier(0.48, -0.53, 0.47, 1.44);

设置了这一属性的变化将会按照这一贝塞尔速度曲线来运动

像这样的都是贝塞尔曲线：

ease-in-out

ease

cubic-bezier(0.48, -0.53, 0.47, 1.44)

...

可以调试出想要的贝塞尔曲线：调制贝塞尔曲线的网址

具体的代码：

效果：

方法二：使用 left + top + 绝对定位

（建议使用动画）

效果：