30分钟学会html+css实现乒乓球快打特效（内附源码）

上次写了一篇html+css制作扑克牌/小胡桃展开小特教,唉，遗憾的是把七七认成小胡桃了，感谢评论区小伙伴纠正错误，就在那篇发布后的几天，就收到很多小伙伴的私信，可不可以多做一些小特效呢？今天它就来了。
基于html+css制做的乒乓球快打小特效，感觉写的还是不怎么细致，不明白的可以下方评论区留言，一起学术交流，正所谓，闻道有先后，术业有专攻。学而不思则罔，思而不学则殆。

七七传送门

乒乓球快打小特效

一、乒乓球快打特效效果图
二、页面背景设置
三、放置左拍、小球和右拍的容器
四、html+css实现乒乓球快打特效源码分享
五、发挥想象力
六、视频效果展示

一、乒乓球快打特效效果图

二、页面背景设置

/* 居中显示 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:动画属性*/
/* 椭圆轨迹旋转 */
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;}

  @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>

五、发挥想象力

上述是一个乒乓球快打小特效，这个小特效还有很大的上升空间，比如把背景图设置成动态效果图效果会更佳，加入乒乓球左拍、右拍击打撞击的声音特效，设置双方得分的动态框，如0：1，9：10，在球台旁边设置观众，再设置一个投票机制（投票自己喜欢的选手、朋友）等等。尽情发挥你的想象力，让不可能变成可能。

六、视频效果展示

html+css实现乒乓球快打动画

30分钟学会html+css实现乒乓球快打特效（内附源码）相关推荐

C# 30分钟完成百度人脸识别——进阶篇（文末附源码）
距离上次入门篇时隔两个月才出这进阶篇,小编惭愧,对不住关注我的卡哇伊的小伙伴们,为此小编用这篇博来谢罪. 前面的准备工作我就不说了,注册百度账号api,创建web网站项目,引入动态链接库引入. 不了解 ...
「ChatGPT」十分钟学会如何在本地调用API_KEY（最新版 | 附源码）
css3 烟蚊香_如何使用纯CSS实现蚊香燃烧的效果（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现传统蚊香燃烧的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载每日前端实战系列的全部源代码请从 ...
css 跳跃动画,如何使用纯CSS实现方块跳跃的动画（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现方块跳跃的动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com/ ...
php控制硬件电源开关模块,如何使用纯CSS实现电源开关控件（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现电源开关控件(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com/c ...
java转俯视图,如何使用纯CSS实现一个足球场的俯视图（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个足球场的俯视图(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.c ...
45个纯 CSS 实现的精美边框效果【附源码】【上篇】
边框效果常用来给图片添加照片效果或用于增强页面内容片断的整体性,在一些团购网站和使用瀑布流布局的网站也经常会使用边框效果.在以前,简单的边框效果使用 CSS 可以轻松实现,但是用到阴影.弯曲和旋转等复 ...
深度学习100例 | 第30天：TensorFlow2 实现动物识别（90类）MobileNetV2算法（内附源码与数据）
在之前的文章中我们通过Xception算法模型实现了狗.猫.鸡.马四种的动物的识别(新模型!实现动物识别).今天我们接着介绍MobileNetV2算法,将数据集扩充到90个类别,即使用 90 个不同类 ...
php万圣节源码,如何使用纯CSS实现万圣节的toggle控件（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现万圣节的toggle控件(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码地址 https://github ...