您的位置:首页 - 教程 - HTML5 - 正文
蓝色的忧郁白色的雪JS特效
效果如下:
http://hovertree.com/texiao/html5/24/

代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯js实现不影响网页点击效果的网页下雪插件 - 何问起</title><base target="_blank" />
<style>
*{margin:0;padding:0;list-style:none;}
html,body{height:100%;overflow:hidden;}
body{background: url(http://hovertree.com/texiao/html5/24/images/bg.jpg) no-repeat center center;background-size:cover;}
/* 以下是CSS3样式,适合高版本浏览器 */
.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);}
}
.hovertree{margin:10px auto;width:320px;}
a{color:white;}
</style>
</head>
<body>
<script src="http://hovertree.com/texiao/html5/24/js/snowflake.js"></script>
<script>
createSnow('', 200);
</script>
<div class="hovertree"><a href="http://hovertree.com/texiao/js/snow.htm">更多</a> <a href="http://hovertree.com/hvtart/bjae/79mtsd1t.htm">效果2</a>
</div>
</body>
</html>

评论: