写一个创意圣诞节祝福代码
时间: 2024-06-14 18:04:37 浏览: 21
以下是一个创意的圣诞节祝福代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>圣诞节快乐</title>
<style>
body {
background-color: #f2f2f2;
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
color: #ff0000;
margin-top: 200px;
}
.snowflake {
position: absolute;
font-size: 2em;
color: #ffffff;
user-select: none;
pointer-events: none;
animation: snowfall 10s linear infinite;
}
@keyframes snowfall {
0% {
transform: translateY(-100vh);
}
100% {
transform: translateY(100vh);
}
}
</style>
</head>
<body>
<h1>圣诞节快乐!</h1>
<script>
function createSnowflake() {
const snowflake = document.createElement("span");
snowflake.innerHTML = "❄";
snowflake.classList.add("snowflake");
snowflake.style.left = Math.random() * 100 + "vw";
snowflake.style.animationDuration = Math.random() * 3 + 2 + "s";
document.body.appendChild(snowflake);
setTimeout(() => {
snowflake.remove();
}, 10000);
}
setInterval(createSnowflake, 100);
</script>
</body>
</html>
```
这段代码使用HTML、CSS和JavaScript创建了一个简单的圣诞节祝福页面。页面背景为浅灰色,居中显示了一个红色的标题“圣诞节快乐!”。页面上会不断飘落着雪花的动画效果,给人一种温馨的圣诞节氛围。