css3实现小球来回滚动

CSS3实现小球来回滚动非常简单，只需要用到两个简单的动画属性：animation和transform。

.ball {
    position: absolute;
    top: 200px;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #FF8C00;
    animation: roll 2s ease-in-out infinite;
}
@keyframes roll {
0% {
    transform: translateX(0);
}
50% {
    transform: translateX(90vw);
}
100% {
    transform: translateX(0);
}
}
    

上述代码中，我们首先定义了一个.ball的类，用于表示小球的样式。接着定义了动画属性animation，给小球加上一个名为roll的动画，动画周期为2秒，缓动方式为ease-in-out，无限循环。

animation: roll 2s ease-in-out infinite;

接下来，我们定义动画的关键帧，从图中可以看出小球的运动轨迹是从左到右，再从右到左，形成来回滚动的效果。因此，我们需要定义三个关键帧，分别为0%、50%和100%。

@keyframes roll {
0% {
    transform: translateX(0);
}
50% {
    transform: translateX(90vw);
}
100% {
    transform: translateX(0);
}
}
    

在0%时，小球的初始位置是在左边界处，不需要进行位移；50%时，小球通过transform的位移属性transform: translateX(90vw)，向右移动90vw，这里的vw表示viewport width，即视口的宽度；100%时，小球又回到了初始位置，重新从左边界开始滚动。

除了上述CSS代码外，还需要一个HTML文件以及引入CSS文件的代码：

!DOCTYPE html>
    html>
    head>
    meta charset="utf-8">
    title>
    CSS3实现小球来回滚动/title>
    link rel="stylesheet" type="text/css" href="style.css">
    /head>
    body>
    div class="ball">
    /div>
    /body>
    /html>
    

最终的效果如下图所示：

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