css3抛物线动画无限循环（css 抛物线）

CSS3抛物线动画是一种非常流行的网页动画效果，它可以让网页看起来更加生动有趣。这种动画效果的实现主要依赖于CSS3的过渡（transition）和变换（transformation）属性。在使用这种动画效果的时候，我们可以通过设置无限循环，让网页看起来更加连贯流畅。

/* HTML 代码 */div class="parabola">
    /div>
/* CSS 代码 */.parabola{
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #f00;
    border-radius: 50%;
    animation: parabola 2s infinite;
}
@keyframes parabola{
0%{
    left: 0;
    top: 0;
    transform: translateX(0) translateY(0);
}
25%{
    left: 50%;
    top: 0;
    transform: translateX(-50%) translateY(0);
}
50%{
    left: 100%;
    top: 50%;
    transform: translateX(-100%) translateY(-50%);
}
75%{
    left: 50%;
    top: 100%;
    transform: translateX(-50%) translateY(-100%);
}
100%{
    left: 0;
    top: 50%;
    transform: translateX(0) translateY(-50%);
}
}
    

在上面的代码中，我们首先创建了一个div元素，并设置其类名为“parabola”。然后通过CSS来设置这个元素的样式。在样式中，我们使用了animation属性来实现无限循环的抛物线动画效果。

接着，我们使用@keyframes关键字来定义动画的关键帧，即动画的起始状态、中间状态和结束状态。在这个例子中，我们将抛物线分为了五个阶段，分别是起始状态、向右上方移动1/4、向右上方移动1/2、向右下方移动3/4和结束状态。通过不同阶段设置的left、top和transform属性，使得元素沿着抛物线的轨迹进行运动。

最后，我们将定义好的动画名称“parabola”赋值给parabola元素的animation属性即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！