用html.css,js实现一个页面,要求展示小球垂直掉落并弹起的效果
时间: 2024-03-02 16:49:20 浏览: 31
好的,以下是一个简单的实现:
HTML部分:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小球掉落弹起效果</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ball"></div>
<script src="script.js"></script>
</body>
</html>
```
CSS部分:
```
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: yellow;
position: absolute;
top: 0;
}
```
JavaScript部分:
```
var ball = document.querySelector('.ball');
var gravity = 0.1;
var velocity = 0;
function drop() {
velocity += gravity;
ball.style.top = ball.offsetTop + velocity + 'px';
if (ball.offsetTop + ball.offsetHeight >= window.innerHeight) {
velocity = -velocity * 0.9;
}
requestAnimationFrame(drop);
}
drop();
```
简要解释一下上面的代码:
首先,我们在HTML中创建了一个div元素,它就是我们要掉落的小球。
然后,在CSS中设置了小球的样式,包括大小、颜色、位置等。
最后,在JavaScript中,我们定义了一个drop函数,它会不断地被requestAnimationFrame调用。在这个函数中,我们通过改变小球的top值来模拟它的掉落,并且根据重力加速度和速度的变化来模拟小球的运动。当小球掉落到窗口底部时,我们通过改变速度的方向和大小来模拟小球的弹起效果。
以上就是一个简单的小球掉落弹起效果的实现。