CSS 动画教程 手把手实现球体抛掷特效

在网页设计中，CSS 动画能够为页面增添生动有趣的交互效果。今天，就让我们手把手来实现一个超酷的球体抛掷特效，为你的网页带来独特魅力。

前期准备

创建 HTML 结构。我们需要一个容器来放置球体，在 HTML 文件中创建一个<div>元素作为容器，再在其中创建一个代表球体的<div>元素。给它们分别添加合适的类名，例如container和ball，方便后续进行样式设置。

<div class="container">
    <div class="ball"></div>
</div>

CSS 基础样式设置

接下来编写 CSS 样式。为container设置一个固定的宽度和高度，作为球体运动的区域。同时设置背景颜色，让区域更加明显。对于ball，设置它的宽度和高度相等，以形成圆形，使用border-radius: 50%属性。再给球体设置一个初始的背景颜色。

.container {
    width: 400px;
    height: 300px;
    background-color: #ccc;
    position: relative;
}

.ball {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    left: 0;
    top: 250px;
}

创建 CSS 动画关键帧

CSS 动画通过关键帧来定义动画的不同阶段。对于球体抛掷特效，我们需要定义球体从起始位置到抛起再落下的过程。使用@keyframes规则创建动画，在关键帧中设置球体的位置和速度变化。例如，在起始关键帧from中，球体位于初始位置；在中间关键帧（如50%）处，球体达到最高点；在结束关键帧to中，球体回到接近地面的位置。通过ease-in-out等速度曲线来模拟真实的抛掷效果。

@keyframes toss {
    from {
        left: 0;
        top: 250px;
        animation-timing-function: ease-out;
    }
    50% {
        left: 200px;
        top: 50px;
        animation-timing-function: ease-in;
    }
    to {
        left: 400px;
        top: 250px;
        animation-timing-function: ease-out;
    }
}

应用动画到球体

最后一步，将创建好的动画应用到球体上。在ball的 CSS 样式中，使用animation属性，指定动画名称（这里是toss）、动画持续时间、动画播放次数等参数。例如，设置动画持续时间为 2 秒，播放一次。

.ball {
    /* 其他样式 */
    animation: toss 2s 1;
}

通过以上步骤，一个简单的 CSS 球体抛掷特效就完成了。不断调整关键帧和动画参数，你可以创造出更加逼真、流畅的抛掷效果，让你的网页充满动感与活力。快来动手试试吧！