如何仅使用 CSS 和 HTML 约束动画？
Posted
技术标签:
【中文标题】如何仅使用 CSS 和 HTML 约束动画？【英文标题】：How do I constraint an animation using only CSS and HTML? 【发布时间】：2016-02-23 10:01:14 【问题描述】：对于一个学校项目，我正在按照本教程进行 Pong 游戏：http://www.sitepoint.com/css3-pong-insane-things-to-do-with-css/
我卡在动画部分。球没有居中，当我将@keyframes updown 放置时，它会使球在球场上上下弹跳，而我希望它被限制在球场内（墙壁）。
See a picture here
如何让球留在禁区内？
这是我的 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;
【问题讨论】：
似乎可以在这个 Fiddle 中找到：jsfiddle.net/Bashere/5jq1yj50 【参考方案1】：首先，您需要从 #ball 和 #horizontal 的 CSS (x2) 中删除 ...。
然后你需要添加到#balltop:142px，这是盒子高度的一半（150px）减去边框的总像素（8px）。
Here is my fiddle of it.
/*********************
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;
【讨论】：
我猜... 指的是他个人项目中的大块 CSS，他认为这与问题无关。
不，@Katana314，在禁止规则的 OP 的 CSS 中有 ... 的实际实例。
我正在查看与您相同的代码块，并且我知道它们在某些规则的内部。我的猜测是他使用了大量的 CSS 来绘制球本身，特别是如果（随机示例）他使用背景/边框黑客或其他东西在球上绘制笑脸。因为这意味着许多 CSS 属性不会影响动画行为，所以它只是意味着额外的阅读。 （诚然，这只是一个猜测）
啊，我明白你的意思了。然后希望 OP 澄清这一点。
啊，我明白了！非常感谢左侧，成功了！并感谢@Kanata314 的可能解释。在 Dreamweaver 中工作时，“...”确实给了我一条错误消息，如果我不删除它，动画将无法工作。在这方面我仍然是个菜鸟，所以我不知道为什么它一开始就在那里，我认为它必须如此。哈哈。以上是关于如何仅使用 CSS 和 HTML 约束动画？的主要内容，如果未能解决你的问题，请参考以下文章
奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？
超赞圆形动画进度条，爱了爱了(使用HTMLCSS和bootstrap框架)