<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: black;
}
@keyframes snow{
0% {
background-position: 0 0, 0 0;
}
100% {
background-position: 500px 1000px, 500px 500px;
}
}
@-webkit-keyframes snow{
0% {
background-position: 0 0, 0 0;
}
100% {
background-position: 500px 1000px, 500px 500px;
}
}
#snowMask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
background: url('http://2013.miaov.com/2013/img/snow1.png'),url('http://2013.miaov.com/2013/img/snow2.png');
pointer-events: none;
-webkit-animation: snow 15s linear infinite;
animation: snow 15s linear infinite;
}
</style>
<script type="text/javascript">
(function(){
var snowMask = document.querySelector('#snowMask');
function isIE() {
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}
snowMask.style.display = (!isIE())?"block":"none";
})();
</script>
</head>
<body>
<div id="snowMask" style="display: block;"></div>
</body>
</html>
