html弧形布局,CSS组合动画实现弧形轨迹_html/css_WEB-ITnose

CSS中的animations 以及 transitions都擅长实现从点A到点B的直线动画。无论你如何调整贝塞尔曲线，你都无法通过animation和transitions让元素沿着曲线运动。自定义线性方法可以产生弹性效果，但是X轴，Y轴上的相对运动还是相同的。

当然可以使用JavaScript来模拟动画，但其实有更简单的方式来绕过这个限制。

先看效果：

单纯对一个元素使用animation或者transition的话，那么计算机会自动选择从A点到B点之间最短的距离。那么如何实现我们想要的曲线效果呢？

拆分之后再组合

物理角度上分析，位移是矢量，我们把它分解成X方向和Y方向的运动。假设我们写了这样的动画：

@keyframes straightLine { 50% { transform: translate3D(100px, -100px, 0); }}.dot { animation: straightLine 2.5s infinite linear;}

从(0，0)移动到(-100， -100)的位置，拆分出来就是从(0，0)到(0， -100)与(0，0)到(-100， 0)的组合。

可能你的第一反应会跟我一样，这样写：

.dot { animation: xAxis 2.5s infinite linear, yAxis 2.5s infinite linear;}@keyframes xAxis { 50% { transform: translateX(100px); }}@keyframes yAxis { 50% { transform: translateY(-100px); } }

拆分成x,y轴方向上的运动&