如何利用 CSS 的动画原理，创作一个乒乓球对打动画

末蓝、 2022-04-15 04:07 245阅读 0赞

![2538044782-5b0f3acce8c06_articlex-1.png][]

## 效果预览 ##

[在线演示][Link 1]

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

[https://codepen.io/comehope/pen/rvgLzK][https_codepen.io_comehope_pen_rvgLzK]

## 可交互视频教程 ##

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

[https://scrimba.com/p/pEgDAM/cW7gZfb][https_scrimba.com_p_pEgDAM_cW7gZfb]

## 源代码下载 ##

[本地下载][Link 2]

每日前端实战系列的全部源代码请从 github 下载：

[https://github.com/comehope/front-end-daily-challenges][https_github.com_comehope_front-end-daily-challenges]

## 代码解读 ##

定义 dom，容器中包含左拍、小球和右拍：

居中显示：

body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(silver, dimgray);
    }

调整盒模型：

* {
        box-sizing: border-box;
    }

画出球案：

.court {
        width: 20em;
        height: 20em;
        color: white;
        border: 1em solid currentColor;
    }

画出左拍：

.court {
        position: relative;
    }
    
    .left-paddle
        width: 1em;
        height: calc(50% - 1em);
        background-color: currentColor;
        position: absolute;
        top: 1em;
        left: 1em;
    }

让左拍动起来：

.left-paddle {
        animation: left-moving 1s linear infinite alternate;
    }
    
    @keyframes left-moving {
        to {
            transform: translateY(100%);
        }
    }

类似地，画出右拍：

.right-paddle
        width: 1em;
        height: calc(50% - 1em);
        background-color: currentColor;
        position: absolute;
        top: 1em;
        left: 1em;
        bottom: 1em;
        right: 1em;
    }

类似地，让右拍动起来：

.right-paddle {
        animation: right-moving 1s linear infinite alternate;
    }
    
    @keyframes right-moving {
        to {
            transform: translateY(-100%);
        }
    }

画出小球：

.ball {
        width: 100%;
        height: 1em;
        border-left: 1em solid currentColor;
        position: absolute;
        left: 2em;
        top: calc(50% - 1.5em);
    }

让小球动起来：

.ball {
        animation: bounce 1s linear infinite alternate;
    }
    
    @keyframes bounce {
        to {
            left: calc(100% - 3em);
        }
    }

最后，重构一下左右拍的代码，合并共有属性：

.left-paddle,
    .right-paddle {
        width: 1em;
        height: calc(50% - 1em);
        background-color: currentColor;
        position: absolute;
        animation: 1s linear infinite alternate;
    }
    
    .left-paddle {
        top: 1em;
        left: 1em;
        animation-name: left-moving;
    }
    
    .right-paddle {
        bottom: 1em;
        right: 1em;
        animation-name: right-moving;
    }

大功告成！

原文地址：[https://segmentfault.com/a/1190000015002553][https_segmentfault.com_a_1190000015002553]

[2538044782-5b0f3acce8c06_articlex-1.png]: /images/20220415/d61468472b78438f9d026654e57cacfa.png
[Link 1]: https://www.jqhtml.com/yanshi?demourl=%2Fwp-content%2Fuploads%2F2018%2F11%2Ffront-end-daily-challenges-master%2F031-minimalist-ping-pong-animation&demotitle=%E4%B9%92%E4%B9%93%E7%90%83%E5%AF%B9%E6%89%93%E5%8A%A8%E7%94%BB
[https_codepen.io_comehope_pen_rvgLzK]: https://codepen.io/comehope/pen/rvgLzK
[https_scrimba.com_p_pEgDAM_cW7gZfb]: https://scrimba.com/p/pEgDAM/cW7gZfb
[Link 2]: http://www.jqhtml.com/19280.html
[https_github.com_comehope_front-end-daily-challenges]: https://github.com/comehope/front-end-daily-challenges
[https_segmentfault.com_a_1190000015002553]: https://segmentfault.com/a/1190000015002553