css动画小球

@keyframes *** {0%---100%}

animation: animationName time [ style ...]

源码

css

...
.sport {
            position: relative;
            width: 500px;
            height: 400px;
            border: 1px solid #F6D66E;
            background-color: greenyellow;
        }
        
        #pole {
            position: absolute;
            z-index: 1;
            bottom: 10px;
            left: 10px;
            overflow: hidden;
            width: 180px;
            height: 8px;
            border-radius: 3px;
            background: #000;
            line-height: 20;
            -moz-animation: pole 3s linear;
            -webkit-animation: pole 3s linear;
            -o-animation: pole 3s linear;
            -ms-animation: pole 3s linear;
            animation: pole 3s linear;
        }
        
        #ball {
            position: absolute;
            z-index: 1;
            bottom: 20px;
            left: 90px;
            overflow: hidden;
            width: 30px;
            height: 30px;
            border-radius: 15px;
            box-shadow: 0 0 10px rgba(107, 22, 22, 0.425);
            background: #eee;
            /* 兼容性处理
            background: -moz-linear-gradient(top, #fff, skyblue);
            background: -webkit-linear-gradient(top, #fff, skyblue);
            background: -o-linear-gradient(top, #fff, skyblue);
            background: -ms-linear-gradient(top, #fff, skyblue);
            */
            background: linear-gradient(top, #fff, skyblue);
            line-height: 20;
            -moz-animation: ball 3s linear;
            -webkit-animation: ball 3s linear;
            -o-animation: ball 3s linear;
            -ms-animation: ball 3s linear;
            animation: ball 3s linear;
        }
/* 小球动画 */
 @keyframes ball {
            0% {
                transform: translate(0, 0);
            }
            5% {
                transform: translate(-90px, -100px);
            }
            18% {
                transform: translate(0, -350px);
            }
            35% {
                transform: translate(200px, 0);
            }
            46% {
                transform: translate(380px, -160px);
            }
            60% {
                transform: translate(250px, -350px);
            }
            78% {
                transform: translate(60px, 0);
            }
            100% {
                transform: translate(0, 0);
            }
        }
/* 杆动画 */
@keyframes pole {
            0% {
                transform: translate(0, 0);
            }
            6% {
                transform: translate(260px, 0);
            }
            20% {
                transform: translate(300px, 0);
            }
            30% {
                transform: translate(300px, 0);
            }
            40% {
                transform: translate(200px, 0);
            }
            65% {
                transform: translate(40px, 0);
            }
            79% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(0, 0);
            }
        }
...
/* 还可以自由发挥，加入更复杂的动画哦 */

html部分

<div class="sport">
        <span id="ball">飞球</span>
        <span id="pole">阻拦杆</span>
</div>

输出结果

如果对你有所帮助，欢迎点赞收藏哦，共同进步哦！！

快去试试吧

blog咻~