html特效下雪代码
时间: 2023-12-03 15:37:55 浏览: 100
下面是一个简单的HTML特效下雪代码,你可以将其添加到你的HTML文件中:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下雪特效</title>
<style>
body {
background-color: #000;
}
.snowflake {
position: absolute;
color: #fff;
font-size: 2em;
-webkit-animation: snow 10s linear infinite;
animation: snow 10s linear infinite;
}
@-webkit-keyframes snow {
0% {
top: -10%;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 100%;
opacity: 0;
}
}
@keyframes snow {
0% {
top: -10%;
opacity: 0;
}
50% {
opacity: 1; }
100% {
top: 100%;
opacity: 0;
}
}
</style>
</head>
<body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var snowflakes = ["❅", "❆", "❄", "❉", "❊"];
setInterval(function() {
var snowflake = $("<div class='snowflake'></div>").html(snowflakes[Math.floor(Math.random() * snowflakes.length)]);
snowflake.css({
"left": Math.random() * $(window).width() - 50,
"opacity": Math.random(),
"font-size": Math.random() * 50 + 10,
"animation-duration": Math.random() * 5 + 5 + "s"
});
$("body").append(snowflake);
snowflake.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() {
$(this).remove();
});
}, 100);
});
</script>
</body>
</html>
```