CSS3 利用贝塞尔曲线实现小球抛物线效果 (处理了小球起点低于终点的情况)

最新推荐文章于 2025-09-12 11:24:35 发布

原创

最新推荐文章于 2025-09-12 11:24:35 发布 · 691 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css3

本文介绍了如何使用CSS3的贝塞尔曲线来创建一个模拟小球沿抛物线轨迹运动的动画效果，特别处理了小球起点低于终点的特殊情况，为网页增添动态视觉魅力。

<!DOCTYPE html>
<html>

<head>
    <title>CSS3 水平抛物线动画</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #ball {
            display: none;
            width: 10px;
            height: 10px;
            background: red;
            border-radius: 50%;
            position: fixed;
        }

        #line {
            height: 100vh;
            width: 1px;
            background: #000;
            position: absolute;
            left: 500px;
        }
    </style>
</head>

<body>
    <div id="ball"></div>
    <div id="line"></div>
</body>
<script>
    var ball = document.getElementById('ball');
    document.onclick = function (e) {
        ball.style.top = e