<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Canvas分形算法绘制的圣诞树</title>
<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: 61vw;
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-delay: -4400ms;
animation-delay: -4400ms;
}
.fall:nth-child(1) .wave {
-webkit-animation-delay: -1840ms;
animation-delay: -1840ms;
-webkit-animation-duration: 650ms;
animation-duration: 650ms;
}
.fall:nth-child(2) {
left: 6vw;
-webkit-animation-duration: 4.6s;
animation-duration: 4.6s;
-webkit-animation-delay: -8700ms;
animation-delay: -8700ms;
}
.fall:nth-child(2) .wave {
-webkit-animation-delay: -1860ms;
animation-delay: -1860ms;
-webkit-animation-duration: 700ms;
animation-duration: 700ms;
}
.fall:nth-child(3) {
left: 17vw;
-webkit-animation-duration: 5.8s;
animation-duration: 5.8s;
-webkit-animation-delay: -7800ms;
animation-delay: -7800ms;
}
.fall:nth-child(3) .wave {
-webkit-animation-delay: -900ms;
animation-delay: -900ms;
-webkit-animation-duration: 850ms;
animation-duration: 850ms;
}
.fall:nth-child(4) {
left: 85vw;
-webkit-animation-duration: 5.2s;
animation-duration: 5.2s;
-webkit-animation-delay: -9600ms;
animation-delay: -9600ms;
}
.fall:nth-child(4) .wave {
-webkit-animation-delay: -280ms;
animation-delay: -280ms;
-webkit-animation-duration: 650ms;
animation-duration: 650ms;
}
.fall:nth-child(5) {
left: 28vw;
-webkit-animation-duration: 5.8s;
animation-duration: 5.8s;
-webkit-animation-delay: -1500ms;
animation-delay: -1500ms;
}
.fall:nth-child(5) .wave {
-webkit-animation-delay: -720ms;
animation-delay: -720ms;
-webkit-animation-duration: 700ms;
animation-duration: 700ms;
}
.fall:nth-child(6) {
left: 56vw;
-webkit-animation-duration: 5.8s;
animation-duration: 5.8s;
-webkit-animation-delay: -6600ms;
animation-delay: -6600ms;
}
.fall:nth-child(6) .wave {
-webkit-animation-delay: -700ms;
animation-delay: -700ms;
-webkit-animation-duration: 850ms;
animation-duration: 850ms;
}
.fall:nth-child(7) {
left: 86vw;
-webkit-animation-duration: 4.6s;
animation-duration: 4.6s;
-webkit-animation-delay: -8800ms;
animation-delay: -8800ms;
}
.fall:nth-child(7) .wave {
-webkit-animation-delay: -980ms;
animation-delay: -980ms;
-webkit-animation-duration: 750ms;
animation-duration: 750ms;
}
.fall:nth-child(8) {
left: 96vw;
-webkit-animation-duration: 5.6s;
animation-duration: 5.6s;
-webkit-animation-delay: -6000ms;
animation-delay: -6000ms;
}
.fall:nth-child(8) .wave {
-webkit-animation-delay: -1980ms;
animation-delay: -1980ms;
-webkit-animation-duration: 700ms;
animation-duration: 700ms;
}
.fall:nth-child(9) {
left: 16vw;
-webkit-animation-duration: 5.4s;
animation-duration: 5.4s;
-webkit-animation-delay: -3000ms;
animation-delay: -3000ms;
}
.fall:nth-child(9) .wave {
-webkit-animation-delay: -1760ms;
animation-delay: -1760ms;
-webkit-animation-duration: 650ms;
animation-duration: 650ms;
}
.fall:nth-child(10) {
left: 82vw;
-webkit-animation-duration: 5.2s;
animation-duration: 5.2s;
-webkit-animation-delay: -300ms;
animation-delay: -300ms;
}
.fall:nth-child(10) .wave {
-webkit-animation-delay: -620ms;
animation-delay: -620ms;
-webkit-animation-duration: 650ms;
animation-duration: 650ms;
}
.fall:nth-child(11) {
left: 26vw;
-webkit-animation-duration: 5.4s;
animation-duration: 5.4s;
-webkit-animation-delay: -8300ms;
animation-delay: -8300ms;
}
.fall:nth-child(11) .wave {
-webkit-animation-delay: -1700ms;
animation-delay: -1700ms;
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
}
.fall:nth-child(12) {
left: 46vw;
-webkit-animation-duration: 5.8s;
animation-duration: 5.8s;
-webkit-animation-delay: -1300ms;
animation-delay: -1300ms;
}
.fall:nth-child(12) .wave {
-webkit-animation-delay: -1600ms;
animation-delay: -1600ms;
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
}
.fall:nth-child(13) {
left: 15vw;
-webkit-animation-duration: 4.2s;
animation-duration: 4.2s;
-webkit-animation-delay: -900ms;
animation-delay: -900ms;
}
.fall:nth-child(13) .wave {
-webkit-animation-delay: -780ms;
animation-delay: -780ms;
-webkit-animation-duration: 700ms;
animation-duration: 700ms;
}
.fall:nth-child(14) {
left: 84vw;
-webkit-animation-duration: 5.2s;
animation-duration: 5.2s;
-webkit-animation-delay: -5400ms;
animation-delay: -5400ms;
}
.fall:nth-child(14) .wave {
-webkit-animation-delay: -620ms;
animation-delay: -620ms;
-webkit-animation-duration: 750ms;
animation-duration: 750ms;
}
.fall:nth-child(15) {
left: 15vw;
-webkit-animation-duration: 5.6s;
animation-duration: 5.6s;
-webkit-animation-delay: -8800ms;
animation-delay: -8800ms;
}
.fall:nth-child(15) .wave {
-webkit-animation-delay: -840ms;
animation-delay: -840ms;
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
}
.fall:nth-child(16) {
left: 5vw;
-webkit-animation-duration: 4.6s;
animation-duration: 4.6s;
-webkit-animation-delay: -8600ms;
animation-delay: -8600ms;
}
.fall:nth-child(16) .wave {
-webkit-animation-delay: -1580ms;
animation-delay: -1580ms;
-webkit-animation-duration: 850ms;
animation-duration: 850ms;
}
.fall:nth-child(17) {
left: 65vw;
-webkit-animation-duration: 4.4s;
animation-duration: 4.4s;
-webkit-animation-delay: -1700ms;
animation-delay: -1700ms;
}
.fall:nth-child(17) .wave {
-webkit-animation-delay: -120ms;
animation-delay: -120ms;
-webkit-animation-duration: 750ms;
animation-duration: 750ms;
}
.fall:nth-child(18) {
left: 33vw;
-webkit-animation-duration: 4.8s;
animation-duration: 4.8s;
-webkit-animation-delay: -7400ms;
animation-delay: -7400ms;
}
.fall:nth-child(18) .wave {
-webkit-animation-delay: -600ms;
animation-delay: -600ms;
-webkit-animation-duration: 850ms;
animation-duration: 850ms;
}
.fall:nth-child(19) {
left: 50vw;
-webkit-animation-duration: 4.6s;
animation-duration: 4.6s;
-webkit-animation-delay: -100ms;
animation-delay: -100ms;
}
.fall:nth-child(19) .wave {
-webkit-animation-delay: -1240ms;
animation-delay: -1240ms;
-webkit-animation-duration: 750ms;
animation-duration: 750ms;
}
.fall:nth-child(20) {
left: 40vw;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-delay: -1100ms;
animation-delay: -1100ms;
}
.fall:nth-child(20) .wave {
-webkit-animation-delay: -1500ms;
animation-delay: -1500ms;
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
}
.fall:nth-child(21) {
left: 75vw;
-webkit-animation-duration:
HTML5 Canvas实现分形算法绘制的圣诞树与下雪动画效果源码.zip
版权申诉
188 浏览量
2022-11-03
23:36:25
上传
评论
收藏 4KB ZIP 举报
HTML5 Canvas实现分形算法绘制的圣诞树与下雪动画效果源码.zip （1个子文件） 
132686863532984536 
index.html 26KB资源评论
毕业_设计
- 粉丝: 1924
- 资源: 1万+
最新资源
- python tkinter-08-盒子模型.ev4.rar
- Doozy UI Manager 2023
- 基于matlab实现夜间车牌识别程序(1).rar
- 基于matlab实现无线传感器网络无需测距定位算法matlab源代码 包括apit，dv-hop，amorphous在内的共7个
- 基于python的yolov5实现的旋转目标检测
- 基于matlab实现无线传感器网络 CAB定位仿真程序 这是无线传感器节点定位CAB算法的仿真程序，由matlab完成.rar
- 基于matlab实现图像处理，本程序使用背景差分法对来往车辆进行检测和跟踪.rar
- 基于matlab实现视频监控中车型识别代码，自己写的，希望和大家多多交流.rar
- springcodespringcodespringcodespringcode
- 基于matlab实现权值的MAXDEV无线传感器网络定位算法研究 MAXDEV 无线传感器 定位 算法.rar
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
