DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> 藍色的憂郁白色的雪JS特效
藍色的憂郁白色的雪JS特效
編輯:HTML5教程     
效果如下:
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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved