数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 HTML、CSS 和 JavaScript 构建弹跳球？
在使用纯 HTML、CSS 和 JavaScript 设计网页时，程序员通常更喜欢开发高级 CSS 设计以使网站更具吸引力。如今，使用关键帧和其他技术创建动画是最流行的技术之一。但是，我们也可以使用 JavaScript 代码创建动画，例如弹跳球效果。这种方法使我们能够更好地控制动画。
本文将首先解释如何使用 HTML 和 CSS 构建弹跳球。我们还将学习如何编写 JavaScript 代码来实现类似的动画。
使用关键帧创建弹跳球
使用纯 HTML 代码制作动画非常困难。相反，我们有 CSS，它为我们提供了多种执行不同动画的技术。在 CSS 中设计动画最流行的方法是使用关键帧。
但是，要创建弹跳球，我们必须开发一个登录来实现它。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
bouncing {
display: flex;
flex-direction: row;
background-color: rgb(223, 210, 176);
align-items: center;
justify-content: center;
height: 50vh;
}
.bouncing-ul {
display: flex;
flex-direction: row;
}
.bouncing-ul li {
width: 40px;
height: 40px;
list-style: none;
background-color: rgb(55, 17, 108);
margin: auto 20px;
border-radius: 50%;
animation: bouncing 1s linear infinite alternate-reverse;
}
@keyframes bouncing {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-150px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<bouncing>
<ul class="bouncing-ul">
<li class="bouncing-li"></li>
</ul>
</bouncing>
</html>
HTML 代码使用 CSS 动画创建弹跳球效果。创建一个具有定义高度和背景颜色的块（弹跳类）。其内容（无序列表 bouncing-ul）在垂直和水平方向上居中对齐。球（bouncing-li 类）被创建为列表项，具有定义的宽度、高度、背景颜色、边距和圆角，使其成为圆形。
动画是使用 @keyframes 规则创建的，该规则定义了 CSS 属性值随时间的变化。动画名为“bouncing”，持续 1 秒，具有线性计时函数和无限交替反向迭代计数。球体垂直移动，从其原始位置 (0%) 移动到其最高点 (-150px at 50%)，然后返回到其原始位置 (100%)。
如何使用 JavaScript 创建弹跳球效果
到目前为止，我们已经了解了如何仅使用 HTML 和 CSS 创建弹跳球效果。但是，有时我们可能希望使用 JavaScript 等编程语言而不是标记语言来执行相同的任务。JavaScript 可以访问浏览器的窗口对象。因此，很容易定义与我们在 CSS 案例中定义的类似规则。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.ball {
position: absolute;
width: 50px;
height: 50px;
border-radius: 25px;
background-color: rgb(41, 66, 190);
}
body{
display: flex;
flex-direction: row;
justify-content: center;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
const ball = document.querySelector('.ball');
let y = 0;
let direction = 1;
let speed = 8;
setInterval(() => {
y = y + speed * direction;
if (y >= window.innerHeight/3 - 50) {
direction = -1;
}
if (y <= 0) {
direction = 1;
}
ball.style.top = y + 'px';
}, 20);
</script>
</body>
解释
我们定义了一个名为 ball 的元素，我们使用 CSS 对其进行了自定义，使其成为一个圆形球体。在 script 标签内，我们编写了 javascript 代码，其中包含动画的所有逻辑。
首先，我们定位了 ball 元素。接下来，我们定义了速度。在 2 秒内，球体上下移动。每当球体到达任一方向的最终目的地时，方向都会发生变化。
结论
在本文中，我们学习了如何使用 HTML、CSS 和 JavaScript 创建弹跳球效果动画。我们了解了如何使用关键帧和 CSS 属性来执行任务。我们了解了如何为单个和多个球创建弹跳球效果。我们建议读者尝试不同的方法来获得类似的输出。
2K+ 次浏览
