纯CSS实现的跳跳球动画，源码如下：

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <  charset=\"UTF-8\">
    < ></ >
    <style>
        body{padding: 0;margin:0;background-color: #ffc000}
        .ball{position: absolute;top:calc(50% - 4rem);left:calc(50% - 4rem);-webkit-animation:go 8s infinite cubic-bezier(.37,.55,.49,.67)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               }
       .main{border: 2rem solid #ffffff;width: 8rem;height: 8rem;background-color:#0091de;border-radius:50%;-webkit-animation:bounce 8s infinite linear;}
        @-webkit-key s go {
            0%{
                -webkit-transform: translateX(-20rem);
            }
            80%{
                opacity:.5
            }
            90%,100%{
                -webkit-transform: translateX(20rem);
                opacity:0
            }
        }


        @-webkit-key s bounce {
            0% {
                transform: translateY(-8em);
                animation-timing-function: cubic-bezier(.51,.01,.79,.02);
            }
            15% {
                transform: translateY(8em);
                animation-timing-function: cubic-bezier(.19,1,.7,1);
            }
            25% {
                transform: translateY(-4em);
                animation-timing-function: cubic-bezier(.51,.01,.79,.02);
            }
            32.5% {
                transform: translateY(8em);
                animation-timing-function: cubic-bezier(.19,1,.7,1);
            }
            40% {
                transform: translateY(0em);
                animation-timing-function: cubic-bezier(.51,.01,.79,.02);
            }
            45% {
                transform: translateY(8em);
                animation-timing-function: cubic-bezier(.19,1,.7,1);
            }
            50% {
                transform: translateY(3em);
                animation-timing-function: cubic-bezier(.51,.01,.79,.02);
            }
            56% {
                transform: translateY(8em);
                animation-timing-function: cubic-bezier(.19,1,.7,1);
            }
            60% {
                transform: translateY(6em);
                animation-timing-function: cubic-bezier(.51,.01,.79,.02);
            }
            64% {
                transform: translateY(8em);
                animation-timing-function: cubic-bezier(.19,1,.7,1);
            }
            66% {
                transform: translateY(7.5em);
                animation-timing-function: cubic-bezier(.51,.01,.79,.02);
            }
            70%, 100% {
                transform: translateY(8em);
                animation-timing-function: cubic-bezier(.19,1,.7,1);
            }
        }
    </style>
</head>
<body>

<section>
    <div class=\"ball\">
        <div class=\"main\"></div>
    </div>
</section>

</body>
</html>

在线运行

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月15日 星期五

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章