js绘制圣诞树下雪动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：js绘制圣诞树下雪动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        html,body {
    	margin:0;
    	background-color:#222;
    	overflow:hidden;
    }
    canvas {
    	position:absolute;
    	top:50%;
    	left:50%;
    	-webkit-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    	display:block;
    }
    .fall {
    	position:absolute;
    	-webkit-animation:fall;
    	animation:fall;
    	-webkit-animation-timing-function:linear;
    	animation-timing-function:linear;
    	-webkit-animation-iteration-count:infinite;
    	animation-iteration-count:infinite;
    }
    .fall:nth-child(1) {
    	left:32vw;
    	-webkit-animation-duration:4.4s;
    	animation-duration:4.4s;
    	-webkit-animation-delay:-400ms;
    	animation-delay:-400ms;
    }
    .fall:nth-child(1) .wave {
    	-webkit-animation-delay:-1380ms;
    	animation-delay:-1380ms;
    	-webkit-animation-duration:650ms;
    	animation-duration:650ms;
    }
    .fall:nth-child(2) {
    	left:83vw;
    	-webkit-animation-duration:5.2s;
    	animation-duration:5.2s;
    	-webkit-animation-delay:-100ms;
    	animation-delay:-100ms;
    }
    .fall:nth-child(2) .wave {
    	-webkit-animation-delay:-360ms;
    	animation-delay:-360ms;
    	-webkit-animation-duration:750ms;
    	animation-duration:750ms;
    }
    .fall:nth-child(3) {
    	left:7vw;
    	-webkit-animation-duration:6s;
    	animation-duration:6s;
    	-webkit-animation-delay:-5600ms;
    	animation-delay:-5600ms;
    }
    .fall:nth-child(3) .wave {
    	-webkit-animation-delay:-1940ms;
    	animation-delay:-1940ms;
    	-webkit-animation-duration:850ms;
    	animation-duration:850ms;
    }
    .fall:nth-child(4) {
    	left:75vw;
    	-webkit-animation-duration:5.6s;
    	animation-duration:5.6s;
    	-webkit-animation-delay:-9500ms;
    	animation-delay:-9500ms;
    }
    .fall:nth-child(4) .wave {
    	-webkit-animation-delay:-1860ms;
    	animation-delay:-1860ms;
    	-webkit-animation-duration:750ms;
    	animation-duration:750ms;
    }
    .fall:nth-child(5) {
    	left:85vw;
    	-webkit-animation-duration:5.6s;
    	animation-duration:5.6s;
    	-webkit-animation-delay:-7600ms;
    	animation-delay:-7600ms;
    }
    .fall:nth-child(5) .wave {
    	-webkit-animation-delay:-1800ms;
    	animation-delay:-1800ms;
    	-webkit-animation-duration:850ms;
    	animation-duration:850ms;
    }
    .fall:nth-child(6) {
    	left:25vw;
    	-webkit-animation-duration:5.4s;
    	animation-duration:5.4s;
    	-webkit-animation-delay:-5300ms;
    	animation-delay:-5300ms;
    }
    .fall:nth-child(6) .wave {
    	-webkit-animation-delay:-1220ms;
    	animation-delay:-1220ms;
    	-webkit-animation-duration:700ms;
    	animation-duration:700ms;
    }
    .fall:nth-child(7) {
    	left:57vw;
    	-webkit-animation-duration:5.2s;
    	animation-duration:5.2s;
    	-webkit-animation-delay:-6800ms;
    	animation-delay:-6800ms;
    }
    .fall:nth-child(7) .wave {
    	-webkit-animation-delay:-1540ms;
    	animation-delay:-1540ms;
    	-webkit-animation-duration:850ms;
    	animation-duration:850ms;
    }
    .fall:nth-child(8) {
    	left:58vw;
    	-webkit-animation-duration:6s;
    	animation-duration:6s;
    	-webkit-animation-delay:-3500ms;
    	animation-delay:-3500ms;
    }
    .fall:nth-child(8) .wave {
    	-webkit-animation-delay:-540ms;
    	animation-delay:-540ms;
    	-webkit-animation-duration:700ms;
    	animation-duration:700ms;
    }
    .fall:nth-child(9) {
    	left:91vw;
    	-webkit-animation-duration:5s;
    	animation-duration:5s;
    	-webkit-animation-delay:-4500ms;
    	animation-delay:-4500ms;
    }
    .fall:nth-child(9) .wave {
    	-webkit-animation-delay:-1740ms;
    	animation-delay:-1740ms;
    	-webkit-animation-duration:650ms;
    	animation-duration:650ms;
    }
    .fall:nth-child(10) {
    	left:63vw;
    	-webkit-animation-duration:6s;
    	animation-duration:6s;
    	-webkit-animation-delay:-4600ms;
    	animation-delay:-4600ms;
    }
    .fall:nth-child(10) .wave {
    	-webkit-animation-delay:-1320ms;
    	animation-delay:-1320ms;
    	-webkit-animation-duration:700ms;
    	animation-duration:700ms;
    }
    .fall:nth-child(11) {
    	left:37vw;
    	-webkit-animation-duration:4.4s;
    	animation-duration:4.4s;
    	-webkit-animation-delay:-5200ms;
    	animation-delay:-5200ms;
    }
    .fall:nth-child(11) .wave {
    	-webkit-animation-delay:-1460ms;
    	animation-delay:-1460ms;
    	-webkit-animation-duration:650ms;
    	animation-duration:650ms;
    }
    .fall:nth-child(12) {
    	left:23vw;
    	-webkit-animation-duration:5s;
    	animation-duration:5s;
    	-webkit-animation-delay:-5000ms;
    	animation-delay:-5000ms;
    }
    .fall:nth-child(12) .wave {
    	-webkit-animation-delay:-1020ms;
    	animation-delay:-1020ms;
    	-webkit-animation-duration:800ms;
    	animation-duration:800ms;
    }
    .fall:nth-child(13) {
    	left:14vw;
    	-webkit-animation-duration:5.2s;
    	animation-duration:5.2s;
    	-webkit-animation-delay:-5400ms;
    	animation-delay:-5400ms;
    }
    .fall:nth-child(13) .wave {
    	-webkit-animation-delay:-1220ms;
    	animation-delay:-1220ms;
    	-webkit-animation-duration:750ms;
    	animation-duration:750ms;
    }
    .fall:nth-child(14) {
    	left:44vw;
    	-webkit-animation-duration:5.4s;
    	animation-duration:5.4s;
    	-webkit-animation-delay:-7200ms;
    	animation-delay:-7200ms;
    }
    .fall:nth-child(14) .wave {
    	-webkit-animation-delay:-1140ms;
    	animation-delay:-1140ms;
    	-webkit-animation-duration:850ms;
    	animation-duration:850ms;
    }
    .fall:nth-child(15) {
    	left:33vw;
    	-webkit-animation-duration:5.2s;
    	animation-duration:5.2s;
    	-webkit-animation-delay:-7600ms;
    	animation-delay:-7600ms;
    }
    .fall:nth-child(15) .wave {
    	-webkit-animation-delay:-1900ms;
    	animation-delay:-1900ms;
    	-webkit-animation-duration:800ms;
    	animation-duration:800ms;
    }
    .fall:nth-child(16) {
    	left:8vw;
    	-webkit-animation-duration:5.2s;
    	animation-duration:5.2s;
    	-webkit-animation-delay:-8400ms;
    	animation-delay:-8400ms;
    }
    .fall:nth-child(16) .wave {
    	-webkit-animation-delay:-1320ms;
    	animation-delay:-1320ms;
    	-webkit-animation-duration:850ms;
    	animation-duration:850ms;
    }
    .fall:nth-child(17) {
    	left:88vw;
    	-webkit-animation-duration:4.6s;
    	animation-duration:4.6s;
    	-webkit-animation-delay:-8000ms;
    	animation-delay:-8000ms;
    }
    .fall:nth-child(17) .wave {
    	-webkit-animation-delay:-1320ms;
    	animation-delay:-1320ms;
    	-webkit-animation-duration:650ms;
    	animation-duration:650ms;
    }
    .fall:nth-child(18) {
    	left:67vw;
    	-webkit-animation-duration:5.2s;
    	animation-duration:5.2s;
    	-webkit-animation-delay:-8100ms;
    	animation-delay:-8100ms;
    }
    .fall:nth-child(18) .wave {
    	-webkit-animation-delay:-1420ms;
    	animation-delay:-1420ms;
    	-webkit-animation-duration:850ms;
    	animation-duration:850ms;
    }
    .fall:nth-child(19) {
    	left:8vw;
    	-webkit-animation-duration:4.8s;
    	animation-duration:4.8s;
    	-webkit-animation-delay:-4800ms;
    	animation-delay:-4800ms;
    }
    .fall:nth-child(19) .wave {
    	-webkit-animation-delay:-1860ms;
    	animation-delay:-1860ms;
    	-webkit-animation-duration:800ms;
    	animation-duration:800ms;
    }
    .fall:nth-child(20) {
    	left:49vw;
    	-webkit-animation-duration:4.2s;
    	animation-duration:4.2s;
    	-webkit-animation-delay:-9800ms;
    	animation-delay:-9800ms;
    }
    .fall:nth-child(20) .wave {
    	-webkit-animation-delay:-720ms;
    	animation-delay:-720ms;
    	-webkit-animation-duration:700ms;
    	animation-duration:700ms;
    }
    .fall:nth-child(21) {
    	left:70vw;
    	-webkit-animation-duration:5.2s;
    	animation-duration:5.2s;
    	-webkit-animation-delay:-9900ms;
    	animation-delay:-9900ms;
    }
    .fall:nth-child(21) .wave {
    	-webkit-animation-delay:-260ms;
    	animation-delay:-260ms;
    	-webkit-animation-duration:850ms;
    	animation-duration:850ms;
    }
    .fall:nth-child(22) {
    	left:26vw;
    	-webkit-animation-duration:5.8s;
    	animation-duration:5.8s;
    	-webkit-animation-delay:-3100ms;
    	animation-delay:-3100ms;
    }
    .fall:nth-child(22) .wave {
    	-webkit-animation-delay:-1740ms;
    	animation-delay:-1740ms;
    	-webkit-animation-duration:700ms;
    	animation-duration:700ms;
    }
    .fall:nth-child(23) {
    	left:30vw;
    	-webkit-animation-duration:5s;
    	animation-duration:5s;
    	-webkit-animation-delay:-5800ms;
    	animation-delay:-5800ms;
    }
    .fall:nth-child(23) .wave {
    	-webkit-animation-delay:-1140ms;
    	animation-delay:-1140ms;
    	-webkit-animation-duration:750ms;
    	animation-duration:750ms;
    }
    .fall:nth-child(24) {
    	left:54vw;
    	-webkit-animation-duration:5.4s;
    	animation-duration:5.4s;
    	-webkit-animation-delay:-8200ms;
    	animation-delay:-8200ms;
    }
    .fall:nth-child(24) .wave {
    	-webkit-animation-delay:-1900ms;
    	animation-delay:-1900ms;
    	-webkit-animation-duration:850ms;
    	animation-duration:850ms;
    }
    .fall:nth-child(25) {
    	left:13vw;
    	-webkit-animation-duration:4.8s;
    	animation-duration:4.8s;
    	-webkit-animation-delay:-300ms;
    	animation-delay:-300ms;
    }
    .fall:nth-child(25) .wave {
    	-webkit-animation-delay:-100ms;
    	animation-delay:-100ms;
    	-webkit-animation-duration:800ms;
    	animation-duration:800ms;
    }
    .fall:nth-child(26) {
    	left:99vw;
    	-webkit-animation-duration:5.2s;
    	animation-duration:5.2s;
    	-webkit-animation-delay:-3600ms;
    	animation-delay:-3600ms;
    }
    .fall:nth-child(26) .wave {
    	-webkit-animation-delay:-1000ms;
    	animation-delay:-1000ms;
    	-webkit-animation-duration:650ms;
    	animation-duration:650ms;
    }
    .fall:nth-child(27) {
    	left:3vw;
    	-webkit-animation-duration:4.8s;
    	animation-duration:4.8s;
    	-webkit-animation-delay:-8500ms;
    	animation-delay:-8500ms;
    }
    .fall:nth-child(27) .wave {
    	-webkit-animation-delay:-1660ms;
    	animation-delay:-1660ms;
    	-webkit-animation-duration:800ms;
    	animation-duration:800ms;
    }
    .fall:nth-child(28) {
    	left:37vw;
    	-webkit-animation-duration:6s;
    	animation-duration:6s;
    	-webkit-animation-delay:-6700ms;
    	animation-delay:-6700ms;
    }
    .fall:nth-child(28) .wave {
    	-webkit-animation-delay:-580ms;
    	animation-delay:-580ms;
    	-webkit-animation-duration:650ms;
    	animation-duration:650ms;
    }
    .fall:nth-child(29) {
    	left:27vw;
    	-webkit-animation-duration:4.2s;
    	animation-duration:4.2s;
    	-webkit-animation-delay:-6600ms;
    	animation-delay:-6600ms;
    }
    .fall:nth-child(29) .wave {
    	-webkit-animation-delay:-900ms;
    	animation-delay:-900ms;
    	-webkit-animation-duration:750ms;
    	animation-duration:750ms;
    }
    .fall:nth-child(30) {
    	left:66vw;
    	-webkit-animation-duration:4.4s;
    	animation-duration:4.4s;
    	-webkit-animation-delay:-6800ms;
    	animation-delay:-6800ms;
    }
    .fall:nth-child(30) .wave {
    	-webkit-animation-delay:-280ms;
    	animation-delay:-280ms;
    	-webkit-animation-duration:750ms;
    	animation-duration:750ms;
    }
    .fall:nth-child(31) {
    	left:41vw;
    	-webkit-animation-duration:5.8s;
    	animation-duration:5.8s;
    	-webkit-animation-delay:-3300ms;
    	animation-delay:-3300ms;
    }
    .fall:nth-child(31) .wave {
    	-webkit-animation-delay:-220ms;
    	animation-delay:-220ms;
    	-webkit-animation-duration:650ms;
    	animation-duration:650ms;
    }
    .fall:nth-child(32) {
    	left:40vw;
    	-webkit-animation-duration:5.6s;
    	animation-duration:5.6s;
    	-webkit-animation-delay:-4900ms;
    	animation-delay:-4900ms;
    }
    .fall:nth-child(32) .wave {
    	-webkit-animation-delay:-800ms;
    	animation-delay:-800ms;
    	-webkit-animation-duration:700ms;
    	animation-duration:700ms;
    }
    .fall:nth-child(33) {
    	left:51vw;
    	-webkit-animation-duration:4.6s;
    	animation-duration:4.6s;
    	-webkit-animation-delay:-5400ms;
    	animation-delay:-5400ms;
    }
    .fall:nth-child(33) .wave {
    	-webkit-animation-delay:-220ms;
    	animation-delay:-220ms;
    	-webkit-animation-duration:850ms;
    	animation-duration:850ms;
    }
    .fall:nth-child(34) {
    	left:14vw;
    	-webkit-animation-duration:5s;
    	animation-duration:5s;
    	-webkit-animation-delay:-9100ms;
    	animation-delay:-9100ms;
    }
    .fall:nth-child(34) .wave {
    	-webkit-animation-delay:-1260ms;
    	animation-delay:-1260ms;
    	-webkit-animation-duration:700ms;
    	animation-duration:700ms;
    }
    .fall:nth-child(35) {
    	left:65vw;
    	-webkit-animation-duration:5.4s;
    	animation-duration:5.4s;
    	-webkit-animation-delay:-7700ms;
    	animation-delay:-7700ms;
    }
    .fall:nth-child(35) .wave {
    	-webkit-animation-delay:-100ms;
    	animation-delay:-100ms;
    	-webkit-animation-duration:750ms;
    	animation-duration:750ms;
    }
    .fall:nth-child(36) {
    	left:97vw;
    	-webkit-animation-duration:4.6s;
    	animation-duration:4.6s;
    	-webkit-animation-delay:-2200ms;
    	animation-delay:-2200ms;
    }
    .fall:nth-child(36) .wave {
    	-webkit-animation-delay:-1240ms;
    	animation-delay:-1240ms;
    	-webkit-animation-duration:800ms;
    	animation-duration:800ms;
    }
    .fall:nth-child(37) {
    	left:75vw;
    	-webkit-animation-duration:5.6s;
    	animation-duration:5.6s;
    	-webkit-animation-delay:-5200ms;
    	animation-delay:-5200ms;
    }
    .fall:nth-child(37) .wave {
    	-webkit-animation-delay:-1580ms;
    	animation-delay:-1580ms;
    	-webkit-animation-duration:800ms;
    	animation-duration:800ms;
    }
    .fall:nth-child(38) {
    	left:28vw;
    	-webkit-animation-duration:4.4s;
    	animation-duration:4.4s;
    	-webkit-animation-delay:-3700ms;
    	animation-delay:-3700ms;
    }
    .fall:nth-child(38) .wave {
    	-webkit-animation-delay:-1400ms;
    	animation-de.........完整代码请登录后点击上方下载按钮下载查看