js封装一个动画名称随机,动画时长随机,动画起始位置位置,动画旋转样式未知,添加动画元素未知
时间: 2023-12-14 20:04:39 浏览: 55
好的,以下是一个简单的实现:
```javascript
function randomAnimation(element) {
// 随机生成动画名称
const animations = ['bounce', 'flash', 'pulse', 'rubberBand', 'shake', 'swing', 'tada', 'wobble', 'jello'];
const randomAnimation = animations[Math.floor(Math.random() * animations.length)];
// 随机生成动画时长
const randomDuration = Math.floor(Math.random() * 5) + 1; // 1到5秒之间
// 随机生成动画起始位置
const randomStart = {
x: Math.floor(Math.random() * window.innerWidth),
y: Math.floor(Math.random() * window.innerHeight)
}
// 随机生成动画旋转样式
const randomRotate = Math.floor(Math.random() * 360);
// 添加动画元素
const animationElement = document.createElement('div');
animationElement.style.position = 'absolute';
animationElement.style.left = `${randomStart.x}px`;
animationElement.style.top = `${randomStart.y}px`;
animationElement.style.width = '50px';
animationElement.style.height = '50px';
animationElement.style.background = 'red';
animationElement.style.transform = `rotate(${randomRotate}deg)`;
element.appendChild(animationElement);
// 添加动画
animationElement.classList.add('animated', randomAnimation);
animationElement.style.animationDuration = `${randomDuration}s`;
// 动画结束后移除元素
animationElement.addEventListener('animationend', () => {
element.removeChild(animationElement);
});
}
```
这个函数会在传入的元素中添加一个随机动画元素,并在动画结束后自动移除元素。你可以在调用这个函数时传入任何元素。
阅读全文