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

用户33914928060
99 阅读4分钟

img img

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

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

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

+ [五、发挥想象力](#_266)
+ [六、视频效果展示](#_271)

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

在这里插入图片描述

二、页面背景设置

/* 居中显示 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;


![img](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/51bb5c3b14d34632beefbaf4d8e68a63~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771311971&x-signature=XObUAWyNAjnBzoM%2FFDF%2BIaxaeao%3D)
![img](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f7d4fcbe98f04600afcee677a260d025~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771311971&x-signature=Cnhru3700Anii2e83vC2Qfm0uh0%3D)

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

**[需要这份系统化资料的朋友，可以戳这里获取](https://gitee.com/vip204888)**


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