.left-paddle{
/\* 椭圆轨迹旋转 \*/
animation:left-moving 1s linear infinite alternate;
}
/\* @keyframe 动画循环, 类似transform 只执行一次 \*/
@keyframes left-moving{
to{
transform:translatey(100%)
}
}
/* 画出小球 */
.ball{
width:100%;
height:1em;
border-left:1em solid currentColor;
position:absolute;
left:2em;
top:calc(50% - 1.5em);
}
/* 让小球动起来 bounce:反弹 linear:线性 */
.ball{
animation:bounce 1s linear infinite alternate;
}
@keyframes bounce{
to{
left:calc(100% - 3em);
}
}
到这里我们就实现了左拍的全部效果，可是出现了一个问题，左拍有了，小球动了，可是谁来接球呢？总不能一边接左边一边接右边，这很明显不合理，也是一种错误的想法。我们接下来写右拍——有球必应（hhh）
.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;
}
到这里右拍的效果就实现了，是不是非常简单，相信聪明的你，你一定可以的。
三、放置左拍、小球和右拍的容器
定义dom,容器中包含左拍、小球和右拍 -
<p class="court">
<p class="left-paddle"></p>
<p class="ball"></p>
<p class="right-paddle"></p>
</p>
</body>
</html>
四、html+css实现乒乓球快打特效源码分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>乒乓球对打动画</title>
</head>
<style>
/\* 居中显示 vh:相对高度,1vh=1% \*视口长度 \*/
body{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(silver,dimgray);
}
/\* 调整盒子的模型 em:当前对象内文本的字体尺寸\*/
\*{
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;
}
/\* 让左拍动起来 animation:动画属性\*/
.left-paddle{
/\* 椭圆轨迹旋转 \*/
animation:left-moving 1s linear infinite alternate;
}
/\* @keyframe 动画循环, 类似transform 只执行一次 \*/
@keyframes left-moving{
to{
transform:translatey(100%)
}
}
/\* 画出小球 \*/
.ball{
width:100%;
height:1em;
border-left:1em solid currentColor;
position:absolute;
left:2em;
top:calc(50% - 1.5em);
}
/\* 让小球动起来 bounce:反弹 linear:线性 \*/
.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;
}
</style>
<body>
<!-- 定义dom,容器中包含左拍、小球和右拍 -->
<p class="court">
<p class="left-paddle"></p>
<p class="ball"></p>
<p class="right-paddle"></p>
</p>
</body>
</html>
五、发挥想象力
上述是一个乒乓球快打小特效，这个小特效还有很大的上升空间，比如把背景图设置成动态效果图效果会更佳，加入乒乓球左拍、右拍击打撞击的声音特效，设置双方得分的动态框，如0：1，9：10，在球台旁边设置观众，再设置一个投票机制（投票自己喜欢的选手、朋友）等等。尽情发挥你的想象力，让不可能变成可能。
六、视频效果展示
html+css实现乒乓球快打动画
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
