使用CSS实现一个抛物线小球动画

要使用CSS实现一个抛物线小球动画，你可以使用@keyframes规则来定义动画的关键帧，并使用animation属性将动画应用到元素上。以下是一个简单的示例，展示如何使用CSS创建一个沿抛物线路径移动的小球动画：

  1. 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>
  1. 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来增强交互性和动态性。

posted @ 2025-01-01 09:30  王铁柱6  阅读(167)  评论(0)    收藏  举报