31.用 CSS 的动画原理，创作一个乒乓球对打动画

Posted 2020-08-18

原文地址：https://segmentfault.com/a/1190000015002553

感想：纯属动画

html代码：

<div class="court">
    <div class="left-paddle"></div>
    <div class="ball"></div>
    <div class="right-paddle"></div>
</div>

CSS代码：

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display:flex;
    justify-content: center;
    align-items: center;
    /* silver: 银色； dimgray: 暗灰色 */
    background: linear-gradient(silver, dimgray);
}
/* 调整盒模型 */
*{
    box-sizing: border-box;
}
/* 画出球案 */
.court{
    position: relative;
    width: 20em;
    height: 20em;
    color: white;
    border: 1em solid currentColor;
}
.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;
}
@keyframes left-moving{
    to{
        transform: translateY(100%);
    }
}
.right-paddle{
    bottom: 1em;
    right: 1em;
    animation-name: right-moving;
}
@keyframes right-moving {
    to {
        transform: translateY(-100%);
    }
}
/* 画出小球 */
.ball{
    position: absolute;
    left: 2em;
    top: calc(50% - 1.5em);
    width: 100%;
    height: 1em;
    border-left: 1em solid currentColor;
    animation: bounce 1s linear infinite alternate;
}
@keyframes bounce{
    to{
        left: calc(100% - 3em);
    }
}