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;.........完整代码请登录后点击上方下载按钮下载查看