源码下载地址
下载到本地文件,浏览器打开HTML文件即可看到效果
html5散开变大雪花动画特效(渐变)
HTML源码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5散开变大雪花动画特效</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.container{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}</style>
</head>
<body>
<div id="jsi-snow-container" class="container"></div>
<script>
var RENDERER = {
SNOW_COUNT: {
INIT : 100, DELTA : 1},
BACKGROUND_COLOR : 'hsl(%h, 50%, %l%)',
INIT_HUE : 180,
DELTA_HUE : 0.1,
init : function(){
this.setParameters();
this.reconstructMethod();
this.createSnow(this.SNOW_COUNT.INIT * this.countRate, true);
this.render();
},
setParameters : function(){
this.$window = $(window);
this.$container = $('#jsi-snow-container');
this.width = this.$container.width();
this.height = this.$container.height();
this.center = {
x : this.width / 2, y : this.height / 2};
this.countRate = this.width * this.height / 500 / 500;
this.canvas = $('<canvas />').attr({
width : this.width, height : this.height}).appendTo(this.$container).get(0);
this.context = this.canvas.getContext('2d');
this.radius = Math.sqrt(this.center.x * this.center.x + this.center.y * this.center.y);
this.hue = this.INIT_HUE;
this.snows = [];
},
reconstructMethod : function(){
this.render = this.render.bind(this);
},
createSnow : function(count, toRandomize){
for(var i = 0; i < count; i++){
this.snows.push(new SNOW(this.width, this.height, this.center, toRandomize));
}
},
render : function(){
requestAnimationFrame(this.render);
var gradient = this.context.