以下是 HTML5 Canvas下雪雪花动画特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh" class="demo1 no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Canvas下雪雪花动画特效</title>
<!-- 可无视 -->
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- 必要代码 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.let_it_snow.js"></script>
</head>
<body class="demo1">
<div class="header">
<h1>HTML5 Canvas下雪雪花动画特效</h1>
<div class="menu">
<a class="active" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
<a href="index5.html">Demo 5</a>
<a href="index6.html">Demo 6</a>
</div>
</div>
<div class="main">
<div class="page_container">
<canvas width="100%" height="100%" class="snow"></canvas>
</div>
</div>
<script type="text/javascript">
$(document).ready( function() {
$("canvas.snow").let_it_snow();
});
</script>
</body>
</html>HTML代码(index2.html):
<!DOCTYPE html>
<html lang="zh" class="demo2 no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下雪</title>
<!-- 可无视 -->
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- 必要代码 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.let_it_snow.js"></script>
</head>
<body class="demo2">
<div class="header">
<h1>Let It Snow: Speed Control</h1>
<div class="menu">
<a href="index.html">Demo 1</a>
<a class="active" href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
<a href="index5.html">Demo 5</a>
<a href="index6.html">Demo 6</a>
</div>
</div>
<div class="main">
<div class="page_container">
<canvas width="100%" height="100%" class="snow"></canvas>
</div>
</div>
<script type="text/javascript">
$(document).ready( function() {
$("canvas.snow").let_it_snow({
speed: 10
});
});
</script>
</body>
</html>
HTML代码(index3.html):
<!DOCTYPE html>
<html lang="zh" class="demo2 no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下雪</title>
<!-- 可无视 -->
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- 必要代码 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.let_it_snow.js"></script>
</head>
<body class="demo2">
<div class="header">
<h1>Let It Snow: Wind Control</h1>
<div class="menu">
<a href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a class="active" href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
<a href="index5.html">Demo 5</a>
<a href="index6.html">Demo 6</a>
</div>
</div>
<div class="main">
<div class="page_container">
<canvas width="100%" height="100%" class="snow"></canvas>
</div>
</div>
<script type="text/javascript">
$(document).ready( function() {
$("canvas.snow").let_it_snow({
windPower: 7,
speed: 3
});
});
</script>
</body>
</html>
HTML代码(index4.html):
<!DOCTYPE html>
<html lang="zh" class="demo4 no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下雪</title>
<!-- 可无视 -->
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- 必要代码 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.let_it_snow.js"></script>
</head>
<body class="demo4">
<div class="header">
<h1>Let It Snow: Color & Size Control</h1>
<div class="menu">
<a href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a class="active" href="index4.html">Demo 4</a>
<a href="index5.html">Demo 5</a>
<a href="index6.html">Demo 6</a>
</div>
</div>
<div class="main">
<div class="page_container">
<canvas width="100%" height="100%" class="snow"></canvas>
</div>
</div>
<script type="text/javascript">
$(document).ready( function() {
$("canvas.snow").let_it_snow({
speed: 10
});
});
</script>
</body>
</html>
HTML代码(index5.html):
<!DOCTYPE html>
<html lang="zh" class="demo5 no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下雪</title>
<!-- 可无视 -->
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- 必要代码 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.let_it_snow.js"></script>
</head>
<body class="demo5">
<div class="header">
<h1>Let It Snow: Time to Go Crazy</h1>
<div class="menu">
<a href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
<a class="active" href="index5.html">Demo 5</a>
<a href="index6.html">Demo 6</a>
</div>
</div>
<div class="main">
<div class="page_container">
<canvas width="100%" height="100%" class="snow"></canvas>
</div>
</div>
<script type="text/javascript">
$(document).ready( function() {
$("canvas.snow").let_it_snow({
windPower: 0,
speed: 0,
color: "#F21313",
size:100,
opacity: 0.00000001,
count: 25,
interaction: false
});
});
</script>
</body>
</html>
HTML代码(index6.html):
<!DOCTYPE html>
<html lang="zh" class="demo2 no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下雪</title>
<!-- 可无视 -->
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- 必要代码 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.let_it_snow.js"></script>
</head>
<body class="demo2">
<div class="header">
<h1>Let It Snow: Custom Image</h1>
<div class="menu">
<a href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
<a href="index5.html">Demo 5</a>
<a class="active" href="index6.html">Demo 6</a>
</div>
</div>
<div class="main">
<div class="page_container">
<canvas width="100%" height="100%" class="snow"></canvas>
</div>
</div>
<script type="text/javascript">
$(document).ready( function() {
$("canvas.snow").let_it_snow({
speed: 1,
size: 15,
count: 26,
image: "img/snowflake.png"
});
});
</script>
</body>
</html>
CSS代码(style.css):
/* Custom Stylesheet */
body,html{margin:0;-webkit-font-smoothing:antialiased;background:#222;text-align:center;}
body,.main,html{padding:0;width:100%;float:left;font-family:'Roboto',Arial,sans-serif;}
body .header{color:#ecf0f1;margin:25px 0;}
.menu a{background:black;color:#fff;font-weight:bold;border-color:#444;}
.menu a:hover{background:black;border-color:#777;}
.menu a.active{background:black;border-color:#777;}
.main p{color:#000;font-size:16px;font-weight:100;}
.nav-top{background:black;}
.nav-top a{color:#ecf0f1;}
/* ALL DEMO */
h1{color:#ffffff;font-family:'Roboto',Arial,sans-serif;font-size:44px;letter-spacing:3px;text-transform:uppercase;font-weight:bold;}
h1 span{font-size:44px;display:block;}
body .nav-top{position:absolute;z-index:11;padding-top:0;}
body .nav-top span{display:inline-block;}
.adswrap{margin-top:55px;}
.menu,.header,.nav-top{margin-bottom:20px;position:relative;z-index:10;padding-top:105px;padding-bottom:0;}
.menu{padding-top:0;}
canvas{display:block;width:100%;height:100%;top:0;left:0;position:fixed;}
.direction{position:relative;color:#ddd;font-style:italic;}
.direction a{color:white;font-weight:bold;}
.demo4{background:#470808;}
.demo5{background:#8C0E0E;}
分享到QQ
分享到微博
微信扫一扫
