隨著冬季的到來，許多網頁需要添加一些節日特效，例如雪花效果。而HTML特效中的雪花是一個非常好的選擇。
<!DOCTYPE html>
<html>
<head>
<title>HTML雪花效果</title>
<style>
body {
background-color: #eee;
}
.snowflake {
position: absolute;
font-size: 3em;
color: white;
pointer-events: none;
animation: falling 5s linear infinite;
-webkit-animation: falling 5s linear infinite;
z-index: 9999;
}
@keyframes falling {
0% {
transform: translateY(-100px) rotate(0deg);
}
100% {
transform: translateY(1000px) rotate(360deg);
}
}
@-webkit-keyframes falling {
0% {
-webkit-transform: translateY(-100px) rotate(0deg);
}
100% {
-webkit-transform: translateY(1000px) rotate(360deg);
}
}
</style>
</head>
<body>
<script>
for(var i=0;i<100;i++) {
var div=document.createElement('div');
div.className='snowflake';
div.innerHTML='❄';
div.style.left=Math.random()*window.innerWidth+'px';
div.style.top=Math.random()*window.innerHeight+'px';
document.body.appendChild(div);
}
</script>
</body>
</html>這是一個簡單的HTML雪花效果代碼，它通過CSS的動畫效果實現了雪花的飄落效果，并通過JavaScript動態添加了一百個雪花。
雖然這個代碼看似簡單，但是它可以為網頁增加一份冬季的溫馨和浪漫感。