用html,css,js编写程序,让一个圆形盒子元素沿着sinx的轨迹移动,移动用translate实现
时间: 2024-10-08 08:24:17 浏览: 32
BP_no_toolbox.zip_BP神经网络的matlab程序_bp sinx_sinx的逼近函数_不使用工具箱_神经网络
5星 · 资源好评率100%
在HTML、CSS和JavaScript中,你可以创建一个圆形元素并使用`requestAnimationFrame`函数让它按照正弦波运动。这里是一个基本的示例:
首先,在HTML中,创建一个圆形元素:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="circle"></div>
<script src="script.js"></script>
</body>
</html>
```
然后,在CSS(styles.css)中设置样式和初始位置:
```css
#circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: blue;
position: absolute; /* 设置为绝对定位 */
top: 50%; left: 50%; /* 初始位置居中 */
}
```
接下来,在JavaScript(script.js)中实现动画效果:
```javascript
const circle = document.getElementById('circle');
let x = 0; // 初始化圆心X坐标
let y = 0; // 初始化圆心Y坐标
let angle = 0;
function animate() {
requestAnimationFrame(animate);
// 根据正弦计算新的Y坐标
y = 100 * Math.sin(angle);
// 计算新的圆心位置,并应用到translate
let newX = x + window.innerWidth / 2 - 50; // 防止超出屏幕边缘
let newY = y + window.innerHeight / 2 - 50;
circle.style.transform = `translate(${newX}px, ${newY}px)`;
// 更新角度
angle += 0.05; // 加速可以改变速度
}
// 开始动画
animate();
阅读全文