要使用CSS实现一个抛物线小球动画，你可以使用@keyframes规则来定义动画的关键帧，并使用animation属性将动画应用到元素上。以下是一个简单的示例，展示如何使用CSS创建一个沿抛物线路径移动的小球动画：
- HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抛物线小球动画</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="ball"></div>
</body>
</html>
- CSS样式和动画 (
styles.css文件)：
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.ball {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
position: relative;
animation: parabolicAnimation 3s ease-in-out forwards;
}
@keyframes parabolicAnimation {
0% {
top: 0;
left: 0;
}
25% {
top: -100px;
left: 200px;
}
50% {
top: -150px;
left: 400px;
}
75% {
top: -100px;
left: 600px;
}
100% {
top: 0;
left: 800px;
}
}
在这个示例中，.ball 类代表小球，我们使用animation属性将parabolicAnimation动画应用到小球上。@keyframes parabolicAnimation定义了动画的关键帧，通过调整top和left属性来模拟抛物线路径。你可以根据需要调整这些值来改变抛物线的形状和动画的速度。
请注意，这个示例是一个简化的版本，用于演示基本概念。在实际项目中，你可能需要更精细地控制动画的路径和速度，或者使用JavaScript来增强交互性和动态性。
标签：动画,top,小球,抛物线,CSS,left From： https://www.cnblogs.com/ai888/p/18645288