![在这里插入图片描述](https://img-blog.csdnimg.cn/e1b246d1d2b74f06ae9a19352f416158.png#pic_center)
>
> /\* 让左拍动起来 animation:动画属性\*/
> /\* 椭圆轨迹旋转 \*/
> animation:left-moving 1s linear infinite alternate;
>
>
>
.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;
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/5524758515324197a5512b1c2ead1f9a.png#pic_center)
@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;
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/cfbc9a9e9b744f58a656babf32eede8d.png#pic_center)
*到这里右拍的效果就实现了,是不是非常简单,相信聪明的你,你一定可以的。*
### 三、放置左拍、小球和右拍的容器
>
> 定义dom,容器中包含左拍、小球和右拍 -
>
>
>
<p class="court">
<p class="left-paddle"></p>
<p class="ball"></p>
<p class="right-paddle"></p>
</p>
![在这里插入图片描述](https://img-blog.csdnimg.cn/504ccbd462634db2a8a6c83d98c5ce52.png#pic_center)
### 四、html+css实现乒乓球快打特效源码分享
.right-paddle{
width:1em;
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
需要这份系统化资料的朋友,可以戳这里获取
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
需要这份系统化资料的朋友,可以戳这里获取
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!