首页 前端知识 30分钟学会html css实现乒乓球快打特效(内附源码)_用html实现球动态背景

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

2024-09-14 23:09:27 前端知识 前端哥 890 65 我要收藏

![在这里插入图片描述](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;

img
img

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化资料的朋友,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化资料的朋友,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18309.html
标签
评论
发布的文章

HTML5 CSS3面试题整理

2024-05-05 22:05:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!