CSS动画- 两固定点之间实现曲线运动
warning:
这篇文章距离上次修改已过200天，其中的内容可能已经有所变动。
要在CSS中实现一个元素沿着两个固定点之间的曲线运动，我们可以使用cubic-bezier()函数定义一个贝塞尔曲线。然后，我们可以使用animation属性来应用这个曲线。
以下是一个简单的例子，演示了如何使用CSS制作一个元素沿一个贝塞尔曲线运动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cubic Bezier Animation</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
animation: move 2s infinite alternate;
}
@keyframes move {
0% {
top: 0;
left: 0;
}
100% {
top: 200px;
left: 200px;
}
}
</style>
</head>
<body>
<div class="ball"></div>
</body>
</html>在这个例子中，.ball类定义了一个红色的圆形元素，并且被赋予了一个animation，使其沿着move这个@keyframes动画运动。@keyframes move定义了元素从左上角开始，到右下角结束的动画。
如果你想要使用自定义的贝塞尔曲线，你可以替换@keyframes move中的值以适应你的需求。
请注意，CSS动画和贝塞尔曲线是静态的。如果你需要在运行时调整曲线或动态生成它们，你可能需要使用JavaScript来实现这一功能。
评论已关闭