DW制作动态雪花背景代码模板

2025-11-21 02:53:11

1、打开Adobe Dreamweaver cs5新建一个空白网页。切换到代码页面

DW制作动态雪花背景代码模板

DW制作动态雪花背景代码模板

2、在<head>后面插入代码:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>HTML5 Canvas实现动态下雪效果</title>

<link href="css/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/jquery.let_it_snow.js"></script>

<script type="text/javascript">

$(document).ready(function(){

3、继续在</head>前面插入代码:

$("canvas.flare").let_it_snow({

windPower: 0,

speed: 0,

color: "#392F52",

size:120,

opacity: 0.00000001,

count: 40,

interaction: false

});

$("canvas.snow").let_it_snow({

windPower: 3,

speed: 1,

count: 250,

size: 0

});

$("canvas.flake").let_it_snow({

windPower: -3,

speed: 1,

count: 20,

size: 10,

image: "images/white-snowflake.png"

});

});

</script>

4、最后在<body><body>插入:

<canvas width="100%" height="100%" class="flare"></canvas>

<canvas width="100%" height="100%" class="snow"></canvas>

<canvas width="100%" height="100%" class="flake"></canvas>

5、预览效果

DW制作动态雪花背景代码模板

6、需要修改背景的方法:修改背景图的方法:顶部导航的修改—页面属性—外观css—背景图像—浏览。即可修改背景图。

DW制作动态雪花背景代码模板

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
相关推荐
  • 阅读量:159
  • 阅读量:80
  • 阅读量:41
  • 阅读量:140
  • 阅读量:112
  • 猜你喜欢