既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新
/* 画出小球 */
.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>
五、发挥想象力
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
66219950)]
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!