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

本文链接：https://blog.csdn.net/2401_84181986/article/details/138852572

既有适合小白学习的零基础资料，也有适合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>