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

撩川

于 2022-04-27 14:50:07 发布

阅读量657

点赞数

文章标签： html css3

本文链接：https://blog.youkuaiyun.com/weixin_56529686/article/details/124447233

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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('

最低0.47元/天解锁文章