html横向往右飘雪代码
时间: 2023-11-03 14:06:01 浏览: 93
以下是一个简单的HTML横向往右飘雪的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Snow Animation</title>
<style>
body {
background-color: #1a1a1a;
overflow: hidden;
}
.snowflake {
position: absolute;
top: -10px;
animation: drift 10s linear infinite;
opacity: 0.7;
font-size: 30px;
color: #fff;
transform: rotate(45deg);
}
@keyframes drift {
0% {
transform: translateX(-100px);
}
100% {
transform: translateX(100vw);
}
}
</style>
</head>
<body>
<script>
// 创建雪花元素
function createSnowflake() {
const snowflake = document.createElement("div");
snowflake.innerHTML = "❄";
snowflake.classList.add("snowflake");
snowflake.style.left = Math.random() * window.innerWidth + "px";
document.body.appendChild(snowflake);
setTimeout(() => {
snowflake.remove();
}, 10000);
}
// 每隔一定时间创建新雪花
setInterval(createSnowflake, 200);
</script>
</body>
</html>
```
该代码使用CSS动画实现了雪花往右飘动的效果。在JavaScript中,每隔一定时间创建一个新的雪花元素,并在一定时间后将其从文档中删除,以避免元素过多占用内存。
阅读全文