js实现一个小球从页面左侧向右侧的三次平移,位置分别是最左边,中间,最右边
时间: 2024-05-09 09:21:18 浏览: 16
以下是实现这个动画的代码:
HTML:
```html
<div class="ball"></div>
```
CSS:
```css
.ball {
position: absolute;
top: 50%;
left: 0;
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
animation: ballMove 6s ease-in-out infinite;
}
@keyframes ballMove {
0% {
transform: translateX(0);
}
33% {
transform: translateX(50%);
}
66% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
```
在这个代码中,我们使用了CSS动画来实现小球的平移。关键代码是 `@keyframes` 规则,它定义了小球的运动方式。我们在0%、33%、66%和100%的位置分别定义了小球的位置,使用 `transform` 属性来实现平移。最后,我们通过将这个动画应用到小球的 `animation` 属性上,使得它能够不断地重复播放。
相关问题
js实现一个小球从页面左侧向右侧的三次平移
以下是js实现小球从页面左侧向右侧的三次平移的代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>小球三次平移</title>
<style type="text/css">
#ball {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="ball"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
```
JavaScript代码:
```javascript
var ball = document.getElementById("ball");
// 第一次平移
var firstTranslation = "translateX(200px)";
// 第二次平移
var secondTranslation = "translateX(400px) translateY(100px)";
// 第三次平移
var thirdTranslation = "translateX(600px) translateY(250px)";
// 设置小球初始位置
ball.style.transform = firstTranslation;
// 执行第一次平移
setTimeout(function() {
ball.style.transform = firstTranslation + " " + secondTranslation;
}, 1000);
// 执行第二次平移
setTimeout(function() {
ball.style.transform = firstTranslation + " " + secondTranslation + " " + thirdTranslation;
}, 2000);
```
解释说明:
1. 首先获取HTML中的小球元素。
2. 定义三次平移的变量:第一次平移向右200px,第二次平移向右400px和向下100px,第三次平移向右600px和向下250px。
3. 设置小球初始位置为第一次平移的位置。
4. 使用setTimeout函数,延迟1秒后执行第一次平移,将小球的transform属性设置为第一次平移和第二次平移的组合。
5. 使用setTimeout函数,延迟2秒后执行第二次平移,将小球的transform属性设置为三次平移的组合。
6. 小球完成三次平移效果。
js实现一个小球从页面左侧向右侧的三次闪烁
以下是实现小球从页面左侧向右侧的三次闪烁的JS代码:
```javascript
// 获取小球元素
const ball = document.getElementById('ball');
// 设置小球初始样式
ball.style.position = 'absolute';
ball.style.left = '0';
// 定义闪烁次数
const blinkCount = 3;
let currentBlink = 0;
// 定义闪烁函数
function blink() {
// 切换小球颜色
if (ball.style.backgroundColor === 'red') {
ball.style.backgroundColor = 'yellow';
} else {
ball.style.backgroundColor = 'red';
}
// 判断是否达到闪烁次数
currentBlink++;
if (currentBlink < blinkCount * 2) {
// 未达到闪烁次数,继续闪烁
setTimeout(blink, 500);
} else {
// 达到闪烁次数,停止闪烁
ball.style.backgroundColor = 'yellow';
}
}
// 执行闪烁函数
setTimeout(blink, 500);
```
解释:
1. 首先获取小球元素,设置小球初始样式,将其放置在页面左侧。
2. 定义闪烁次数和当前闪烁次数。
3. 定义闪烁函数,每次调用时切换小球颜色,直到达到闪烁次数为止。
4. 在页面加载完成后,通过setTimeout函数延迟调用闪烁函数,使小球开始闪烁。