3

对于学校项目，我正在按照本教程进行 Pong 游戏：http ://www.sitepoint.com/css3-pong-insane-things-to-do-with-css/

我被困在动画部分。球没有居中，当我将@keyframes 向上放置时，它会使球在球场上上下弹跳，而我希望它在球场内（墙壁）受到约束。

在这里看一张图片

如何让球留在禁区内？

这是我的 HTML：

<!doctype html>
<meta charset="UTF-8">
<title>Pong (1972)</title>
<link href="styles/csspong.css" rel="stylesheet">

<h1>CSS PONG</h1>
<div id="court">
    <div id="horizontal">
    <span id="ball"></span>
    </div>
</div>

CSS：

/*********************
    PLATFORM
********************/

#court{ 
    margin: 30px auto;
    width: 600px;
    height: 300px;
    position: relative;
    border: 4px dotted #3f3;
}

#court:before{
    left: 50%;
    content:'';
    width: 10px;
    height: 300px;
    position: absolute;
    border-left: 4px dashed #3f3;
    }

/*********************
        BALL
********************/

#ball{
    position: absolute;
    width: 20px;
    height: 20px;
    display: block;
    background :#3f3;
    border-radius: 50%;
    transform: translate3d(10px,0,0)
}

/*********************
    BALL ANIMATION
********************/

@keyframes leftright {
0%,100% {transform: translate3d(10px,0,0)}
50% {transform: translate3d(570px,0,0)}
}
#ball{
 ...
 animation: leftright 2s infinite linear
 }

 @keyframes updown {
 0%,50%,100% {transform: translate3d(0,0,0)}
 25% {transform: translate3d(0,142px,0)}
 75% {transform: translate3d(0,-136px,0)} }

 #horizontal{
 ...
 animation: updown 2s infinite linear; }
4

1 回答 1

0

首先，您需要...从您的 CSS (x2)#ball和#horizontal.

然后你需要添加#ball top:142px，它是盒子高度的一半（150px）减去边框的总像素（8px）。

这是我的小提琴。

/*********************
PLATFORM
********************/

#court{ 
    margin: 30px auto;
    width: 600px;
    height: 300px;
    position: relative;
    border: 4px dotted #3f3;
}

#court:before{
    left: 50%;
    content:'';
    width: 10px;
    height: 300px;
    position: absolute;
    border-left: 4px dashed #3f3;
}

/*********************
    BALL
********************/

#ball{
    top:142px;
    position: absolute;
    width: 20px;
    height: 20px;
    display: block;
    background :#3f3;
    border-radius: 50%;
    transform: translate3d(10px,0,0)
}

/*********************
BALL ANIMATION
********************/

@keyframes leftright {
    0%,100% {transform: translate3d(10px,0,0)}
    50% {transform: translate3d(570px,0,0)}
}
#ball{

     animation: leftright 2s infinite linear
 }

@keyframes updown {
    0%,50%,100% {transform: translate3d(0,0,0)}
    25% {transform: translate3d(0,142px,0)}
    75% {transform: translate3d(0,-136px,0)} }

#horizontal{
    animation: updown 2s infinite linear; 
}
于 2015-11-20T19:49:15.560 回答