html+css3+js实现网页下雪
1、准备好需要用到的图标。
2、新建html文档。
3、初始化css代码。
<style>
*{margin:0;padding:0;list-style:none;}
html,body{height:100%;}
body{background: url(images/bg.jpg) no-repeat center center;background-size:cover;}
</style>
4、书写css下雪场景核心代码代码。
<style>
.Snowflake{animation:linear spin infinite 20s;-webkit-animation:linear spin infinite 20s;-moz-animation:linear spin infinite 20s;pointer-events:none;}
@keyframes spin{
0% {transform:rotate(0deg);}
100% {transform:rotate(359deg);}
}
@-webkit-keyframes spin{
0% {-webkit-transform:rotate(0deg);}
100% {-webkit-transform:rotate(359deg);}
}
@-moz-keyframes spin{
0% {-moz-transform:rotate(0deg);}
100% {-moz-transform:rotate(359deg);}
}</style>
5、书写并添加js代码。
<script src="js/snowflake.js"></script>
<script>
createSnow('', 200);
</script>
6、书写<script src="js/snowflake.js"></script>代码。
<script>
(function() {
function b(g, f, h) {
if (g.addEventListener) {
g.addEventListener(f, h, false)
} else {
g.attachEvent && g.attachEvent("on" + f, h)
}
}
function m(g) {
if (typeof window.onload != "function") {
window.onload = g
} else {
var f = window.onload;
window.onload = function() {
f();
g()
}
}
}
function e() {
var g = {};
for (type in {
Top: "",
Left: ""
}) {
var f = type == "Top" ? "Y" : "X";
if (typeof window["page" + f + "Offset"] != "undefined") {
g[type.toLowerCase()] = window["page" + f + "Offset"]
} else {
f = document.documentElement.clientHeight ? document.documentElement : document.body;
g[type.toLowerCase()] = f["scroll" + type]
}
}
return g
}
function a() {
var g = document.body,
f;
if (window.innerHeight) {
f = window.innerHeight
} else {
if (g.parentElement.clientHeight) {
f = g.parentElement.clientHeight
} else {
if (g && g.clientHeight) {
f = g.clientHeight
}
}
}
return f
}
function d(f) {
this.parent = document.body;
this.createEl(this.parent, f);
this.size = Math.random() * 20 + 10;
this.el.style.width = Math.round(this.size) + "px";
this.el.style.height = Math.round(this.size) + "px";
this.maxLeft = document.body.offsetWidth - this.size;
this.maxTop = document.body.offsetHeight - this.size;
this.left = Math.random() * this.maxLeft;
this.top = e().top + 1;
this.angle = 1.4 + 0.2 * Math.random();
this.minAngle = 1.4;
this.maxAngle = 1.6;
this.angleDelta = 0.01 * Math.random();
this.speed = 2 + Math.random()
}
var c = false;
m(function() {
c = true
});
var n = true;
window.createSnow = function(h, g) {
if (c) {
var i = [],
f = setInterval(function() {
n && g > i.length && Math.random() < g * 0.0025 && i.push(new d(h));
!n && !i.length && clearInterval(f);
for (var j = e().top, l = a(), k = i.length - 1; k >= 0; k--) {
if (i[k]) {
if (i[k].top < j || i[k].top + i[k].size + 1 > j + l) {
i[k].remove();
i[k] = null;
i.splice(k, 1)
} else {
i[k].move();
i[k].draw()
}
}
}
}, 40);
b(window, "scroll", function() {
for (var j = i.length - 1; j >= 0; j--) {
i[j].draw()
}
})
} else {
m(function() {
createSnow(h, g)
})
}
};
window.removeSnow = function() {
n = false
};
d.prototype = {
createEl: function(g, f) {
this.el = document.createElement("img");
this.el.setAttribute("src", "images/Snowflake.png");
this.el.style.position = "absolute";
this.el.style.display = "block";
this.el.style.zIndex = "99999";
this.el.className = "Snowflake";
this.parent.appendChild(this.el)
},
move: function() {
if (this.angle < this.minAngle || this.angle > this.maxAngle) {
this.angleDelta = -this.angleDelta
}
this.angle += this.angleDelta;
this.left += this.speed * Math.cos(this.angle * Math.PI);
this.top -= this.speed * Math.sin(this.angle * Math.PI);
if (this.left < 0) {
this.left = this.maxLeft
} else {
if (this.left > this.maxLeft) {
this.left = 0
}
}
},
draw: function() {
this.el.style.top = Math.round(this.top) + "px";
this.el.style.left = Math.round(this.left) + "px"
},
remove: function() {
this.parent.removeChild(this.el);
this.parent = this.el = null
}
}
})();
</script>
7、代码整体结构。
8、查看效果。
