30分钟学会html+css实现乒乓球快打特效（内附源码）_用html实现球动态背景

![在这里插入图片描述](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行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！