原文地址：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); ???}}31.用 CSS 的动画原理，创作一个乒乓球对打动画
原文地址：https://www.cnblogs.com/FlyingLiao/p/10336537.html