[分享]css动画按曲线运动

CSS动画是创建令人惊叹的用户体验和动态效果的一种很好的方法。其中一个最有趣的技巧之一是按曲线运动。以下是一个简单的示例，演示了如何使用CSS动画按照曲线运动。.curve{ width: 6rem;...

CSS动画是创建令人惊叹的用户体验和动态效果的一种很好的方法。其中一个最有趣的技巧之一是按曲线运动。以下是一个简单的示例，演示了如何使用CSS动画按照曲线运动。

.curve{
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background-color: teal;
    position: absolute;
    top: 10rem;
    left: 50%;
    transform: translateX(-50%);
    animation: curve-motion 2s cubic-bezier(.9,-0.05,.5,1.5) infinite alternate;
}

@keyframes curve-motion{
    0%{
        transform: translateX(-50%);
    }
    50%{
        transform: translate(8rem,-6rem);
    }
    100%{
        transform: translateX(-50%);
    }
} 

在这个示例中，我们定义了一个圆形的div，给它一个背景色、边框和边框半径。它被定位在页面顶部，并水平居中，因此我们使用了transform: translateX(-50%);。接下来是重点：我们使用animation属性为这个div添加了一个动画。

我们定义了一个名为curve-motion的动画，将它作为键框来描述。这个动画被设置为2秒，使用了一个名为cubic-bezier的渐变函数。这个函数允许我们定义一个自定义的三次贝塞尔曲线（请查看https://cubic-bezier.com/，以获得更多有关贝塞尔曲线的信息）。在这个示例中，我们使用了一个稍微反弹一点的曲线。

在曲线动画的关键帧中，我们根据需要移动我们的圆形div。在0%和100%关键帧中，它被放置在屏幕的中心，而在50%关键帧中，它被向右下方移动了一些距离。我们使用transform:translate()属性来实现移动。

最后，我们通过将infinite和alternate关键字添加到animation属性中来使动画无限循环。这意味着，当动画完成时，它会自动倒转回来。

按曲线移动元素是一个有趣而又实用的技术，它可以为您的Web应用程序或网站添加流畅和视觉上的动态效果。