这篇博客介绍了如何使用CSS3实现DOM元素的抛物线运动效果，通过水平和垂直方向不同的timing-function来模拟。文章提供了一个示例，通过内外两层标签，结合`transition-timing-function`属性，调整不同的缓动函数，如`linear`和`cubic-bezier`，以创建抛物线轨迹。此外，文中还讨论了运动轨迹的向量分解和如何通过调整贝塞尔曲线参数增强弹性效果。
一、回顾之前的JS实现
差不多5年前，写了篇文章，名为“JavaScript与元素间的抛物线轨迹运动”(忽略前面几段的牢骚)，然后写个JS方法，可以实现任意元素的抛物线运动效果，兼容到IE6浏览器，语法如下：
funParabola(element, target, options);
就可以实现element元素到target元素的抛物线运动效果，类似这样：
具体参数含义见原文，这不不再重复叙述。
实际上，纯CSS也是可以实现DOM元素的抛物线运动效果的。
应该是数年前，我看过一篇外文，就是水平和垂直运动使用不同的timing-function可以得到曲线效果，记在了脑子里。然后，这周一例会上的时候，和小伙伴提到直接CSS3 animation也能实现抛物线效果，感觉大家有些懵，知道可以这样，但完全脑补不出来，我意识到，可以写篇文章再重提此技术tips，相信还是有很多小伙伴不知道。
二、效果抢先体验
点击demo页面的“加入购物车”按钮，即可体验抛物线运动效果，如下GIF截屏：
此抛物线效果的核心就是CSS代码实现的。原理如下：
抛物线运动元素使用至少内外两层标签，例如，本demo抛物线运动物体是CSS世界这本书的缩略图，
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
