当前位置: 首页 > Web前端 > HTML5

前端日常实战:31#视频演示如何利用CSS动画原理制作乒乓球对练动画

时间:2023-04-05 13:24:05 HTML5

效果预览在当前页面点击右侧“点击预览”按钮进行预览,点击链接即可全屏预览。https://codepen.io/comehop??e/pen/rvgLzK交互式视频教程本视频是交互式的,您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cW7gZfb源码下载日常前端实战系列完整源码请到github下载:https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom,容器包含左球拍、小球和右球拍:

中心显示:body{height:100vh;显示:弹性;对齐项目:居中;证明内容:居中;background:linear-gradient(silver,dimgray);}调整盒子模型:*{box-sizing:border-box;}画球case:.court{width:20em;高度:20em;白颜色;border:1emsolidcurrentColor;}绘制左侧镜头:.court{position:relative;}.left-paddlewidth:1em;高度:计算(50%-1em);背景颜色:currentColor;位置:绝对;顶部:1em;left:1em;}让左桨向上:.left-paddle{animation:left-moving1slinearinfinitealternate;}@keyframesleft-moving{to{transform:translateY(100%);}}类似地,绘制右桨:.right-paddle宽度:1em;高度:计算(50%-1em);背景颜色:currentColor;位置:绝对;顶部:1em;左:1em;底部:1em;.right-paddle{动画:右移1s线性无限交替;}@keyframes右移{to{transform:translateY(-100%);}}画一个小球:.ball{width:100%;高度:1em;border-left:1emsolidcurrentColor;位置:绝对;左:2em;top:calc(50%-1.5em);}让球移动:.ball{animation:bounce1slinearinfinitealternate;}@keyframesbounce{to{left:calc(100%-3em);}}最后重构左右桨代码,合并公共属性:.left-paddle,.right-paddle{width:1em;高度:计算(50%-1em);背景颜色:currentColor;位置:绝对;animation:1slinearinfinityalternate;}.left-paddle{top:1em;左:1em;animation-name:left-moving;}.right-paddle{bottom:1em;右:1em;animation-name:right-moving;}大功告成!