使用简单的html+css+js实现雪花飘飘效果,要求雪花飘落的效果用random实现
时间: 2024-03-15 14:45:18 浏览: 17
以下是一个简单的HTML+CSS+JS实现雪花飘飘效果的代码,其中使用了JavaScript的random方法实现了雪花的随机位置和下落速度。
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>雪花飘飘</title>
<style>
body {
background-color: #000;
}
.snow {
position: absolute;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
pointer-events: none;
z-index: 9999;
animation: falling 5s linear infinite;
}
@keyframes falling {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
</style>
</head>
<body>
<script src="snow.js"></script>
</body>
</html>
```
CSS代码:
```css
body {
background-color: #000;
}
.snow {
position: absolute;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
pointer-events: none;
z-index: 9999;
animation: falling 5s linear infinite;
}
@keyframes falling {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
```
JavaScript代码:
```javascript
function createSnow() {
const snow = document.createElement('div');
snow.classList.add('snow');
snow.style.left = Math.random() * window.innerWidth + 'px';
snow.style.animationDuration = Math.random() * 5 + 5 + 's';
document.body.appendChild(snow);
setTimeout(() => {
snow.remove();
}, 5000);
}
setInterval(createSnow, 100);
```
代码说明:
1. HTML文件中引入了一个JavaScript文件`snow.js`,该文件用于创建雪花元素。
2. CSS文件中定义了雪花元素的样式,包括位置、大小、颜色、动画等。
3. JavaScript文件中定义了一个`createSnow()`函数,用于创建雪花元素。函数中使用`Math.random()`方法生成一个随机的左侧位置和动画时长,然后将雪花元素添加到页面中。
4. 使用`setInterval()`方法每隔100毫秒调用一次`createSnow()`函数,从而实现不断产生雪花的效果。
注意:这里的雪花效果比较简单,仅作为示例参考。实际应用中需要根据具体需求进行调整和优化。