<!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/SVG圣诞节橱窗雪景</title>
<style>
body {
background: #111;
background-size: 100%;
height: 100vh;
width: 100%;
overflow: hidden;
margin: 0;
}
/***************************
The DIV for the SVG wall. As I want the snow to show through the windows, I need to place this layer with a higher z-index then Miss Tiff's snow ---> http://codepen.io/tmrDevelops/pen/PPgjwz
***************************/
#Workshop_Back {
position: absolute;
width: 100vw;
height: 100vh;
margin: 0;
z-index: 200;
}
/***************************
Styles for the SVG Wall. Created the wall in illustrator and then knocked out the window panes so the snow (and other festive surprises) would show through.
***************************/
#Workshop_Wall {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
z-index: 1000;
}
.workshop_Wall_0 {
fill: #A77B5F;
}
.workshop_Wall_1 {
fill: #60462F;
}
.workshop_Wall_2 {
fill: #8C5A3C;
}
.workshop_Wall_3 {
fill: #B96636;
}
.workshop_Wall_4 {
fill: #D3814D;
}
.workshop_Wall_5 {
fill: #B0581F;
}
.workshop_Wall_6 {
fill: #C1652F;
}
.workshop_Wall_7 {
fill: #C66225;
}
.workshop_Wall_8 {
fill: #1F01FB;
}
.workshop_Wall_9 {
fill: #BD0302;
}
.workshop_Wall_10 {
fill: #AD7964;
}
.workshop_Wall_11 {
fill: #9E99BC;
}
.workshop_Wall_12 {
fill: #8587AC;
}
.workshop_Wall_13 {
fill: #A58175;
}
.workshop_Wall_14 {
fill: #A8A6C3;
}
.workshop_Wall_15 {
fill: #B56A3E;
}
/***************************
Snow. Positioned layer using a low z-index in the very back.
***************************/
#tiffany_snow {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
pointer-events: none;
}
</style>
</head>
<body>
<canvas id='tiffany_snow'></canvas>
<div id="Workshop_Back">
<svg id="Workshop_Wall" viewBox="0 0 612 792">
<g id="Wall">
<g>
<g>
<path class="workshop_Wall_0" d="M1807,75c0,239.2,0,478.3,0.1,717.5c0,3.7-0.8,4.6-4.6,4.6c-997-0.1-1994-0.1-2991,0c-3.7,0-4.6-0.8-4.6-4.6
c0.1-239.2,0.1-478.3,0.1-717.5C-193,75,807,75,1807,75z M751,453c0,0.7,0,1.4,0,2c0,3.6,0,7.3,0,10.9c0.3,0.4,0.5,0.8,0.8,1.2
c0,0.6-0.1,1.2-0.1,1.8c-6.5,4-13.1,8-19.6,12c-3.2,8.6-1.7,11.1,6.9,11.1c87.9,0,175.7,0,263.6-0.1c2.2,0,5.4,1.1,6-1.9
s2-6.6-1.5-9.1c-4-3.8-9-6.1-13.8-8.6c-3.3-1.8-4.5-3.9-4.3-7.5c0.2-5.3,0-10.6,0-15.9c0-57-0.1-114-0.1-170.9
c-0.3-0.4-0.5-0.7-0.8-1.1c-3.2-17.1-10.2-32.6-19.7-47.1c-12.9-19.7-30-34.2-51.9-42.8c-20.9-8.2-42.5-10.6-64.7-8
c-30.8,3.7-56.2,17.2-74.7,42.2c-16.9,22.9-27.9,48-25.9,77.4c0.2,2.8,0,5.7,0,8.5C751.1,355.7,751.1,404.4,751,453z M376,453
c0,0.7,0,1.4,0,2c0,3.6,0,7.3,0,10.9c0.3,0.4,0.5,0.8,0.8,1.2c0,0.6-0.1,1.2-0.1,1.8c-6.5,4-13.1,8-19.6,12
c-3.2,8.6-1.7,11.1,6.9,11.1c87.9,0,175.7,0,263.6-0.1c2.2,0,5.4,1.1,6-1.9s2-6.6-1.5-9.1c-4-3.8-9-6.1-13.8-8.6
c-3.3-1.8-4.5-3.9-4.3-7.5c0.2-5.3,0-10.6,0-15.9c0-57-0.1-114-0.1-170.9c-0.3-0.4-0.5-0.7-0.8-1.1
c-3.2-17.1-10.2-32.6-19.7-47.1c-12.9-19.7-30-34.2-51.9-42.8c-20.9-8.2-42.5-10.6-64.7-8c-30.8,3.7-56.2,17.2-74.7,42.2
c-16.9,22.9-27.9,48-25.9,77.4c0.2,2.8,0,5.7,0,8.5C376.1,355.7,376.1,404.4,376,453z M-369.1,467.2c0,0.6-0.1,1.2-0.1,1.8
c-6.5,4-13.1,8-19.6,12c-3.2,8.6-1.7,11.1,6.9,11.1c87.9,0,175.7,0,263.6-0.1c2.2,0,5.4,1.1,6-1.9s2-6.6-1.5-9.1
c-4-3.8-9-6.1-13.8-8.6c-3.3-1.8-4.5-3.9-4.3-7.5c0.2-5.3,0-10.6,0-15.9c0-57-0.1-114-0.1-170.9c-0.3-0.4-0.5-0.7-0.8-1.1
c-3.2-17.1-10.2-32.6-19.7-47.1c-12.9-19.7-30-34.2-51.9-42.8c-20.9-8.2-42.5-10.6-64.7-8c-30.8,3.7-56.2,17.2-74.7,42.2
c-16.9,22.9-27.9,48-25.9,77.4c0.2,2.8,0,5.7,0,8.5c0,48.6,0,97.2,0,145.9c0,0.7,0,1.4,0,2c0,3.6,0,7.3,0,10.9
C-369.7,466.4-369.4,466.8-369.1,467.2z M-6,453c0,0.7,0,1.4,0,2c0,3.6,0,7.3,0,10.9c0.3,0.4,0.5,0.8,0.8,1.2
c0,0.6-0.1,1.2-0.1,1.8c-6.5,4-13.1,8-19.6,12c-3.2,8.6-1.7,11.1,6.9,11.1c87.9,0,175.7,0,263.6-0.1c2.2,0,5.4,1.1,6-1.9
s2-6.6-1.5-9.1c-4-3.8-9-6.1-13.8-8.6c-3.3-1.8-4.5-3.9-4.3-7.5c0.2-5.3,0-10.6,0-15.9c0-55.5,0-111,0-166.5
c0-2.5-0.5-4.9-1.1-7.4c-3.9-16.6-10.6-31.9-20-46c-12.3-18.5-28.6-32.5-49-41.1c-21.5-9-43.9-11.7-67.1-8.9
c-30.4,3.6-55.7,16.8-74.2,41.4C3.3,243.4-7.9,268.9-6,298.6c0.2,2.8,0,5.7,0,8.5C-5.9,355.7-5.9,404.3-6,453z" />
<path class="workshop_Wall_1" d="M-1193,69c0-23,0-46-0.1-69c0-2.5,0.6-3.5,3.1-3c0.5,0.1,1,0,1.5,0c997,0,1994,0,2991-0.1
c3.7,0,4.6,0.8,4.6,4.6c-0.2,22.5-0.1,45-0.1,67.5C807,69-193,69-1193,69z" />
<path class="workshop_Wall_2" d="M-1193,69c1000,0,2000,0,3000,0c0,2,0,4,0,6c-1000,0-2000,0-3000,0C-1193,73-1193,71-1193,69z" />
<path class="workshop_Wall_3" d="M-388.9,481c6.5-4,13.1-8,19.6-12c2.7-0.7,2.3-2.9,2.3-4.8c0-6.4,0-12.8,0-19.2c3.3,0,6.7,0,10,0
c0,5.5,0.3,11-0.1,16.5c-0.3,5,1.3,6.6,6.5,6.6c32.2-0.2,64.3-0.1,96.5-0.1c2.1,0,4.1,0,6.2,0c4.5,0,9,0,13.5,0
c27.1,0,54.1,0,81.2,0c8.3,0,8.3,0,8.3-8.5c0-3.2,0-6.3,0-9.5c4.1-0.6,2.9-3.9,2.9-6.3c0.1-32.4-0.4-64.9,2-97.2
c0.3-3.7,0.6-6.2,5-3.5c0,0.7,0,1.3,0,2c-2.6,1.7-2.6,3.4,0,5c0,29.6,0,59.3,0.1,88.9c0,3.5-0.7,7.4,2.9,10
c0,5.3,0.3,10.6,0,15.9c-0.1,3.6,1.1,5.7,4.3,7.5c4.8,2.6,9.8,4.9,13.8,8.6C-205.6,481-297.2,481-388.9,481z" />
<path class="workshop_Wall_3" d="M231.9,448.9c0,5.3,0.3,10.6,0,15.9c-0.1,3.6,1.1,5.7,4.3,7.5c4.8,2.6,9.8,4.9,13.8,8.6
c-91.7,0-183.3,0-275,0c6.5-4,13.1-8,19.6-12c2.7-0.7,2.3-2.9,2.3-4.8c0-6.4,0-12.8,0-19.2c3.3,0,6.7,0,10,0
c0,5.5,0.3,11-0.1,16.5c-0.3,5,1.3,6.6,6.5,6.6c32.2-0.2,64.3-0.1,96.5-0.1c2.1,0,4.1,0,6.2,0c4.5,0,9,0,13.5,0
c27.1,0,54.1,0,81.2,0c8.3,0,8.3,0,8.3-8.5c0-3.2,0-6.3,0-9.5c4.1-0.6,2.9-3.9,2.9-6.3c0.1-32.4-0.4-64.9,2-97.2
c0.3-3.7,0.6-6.2,5-3.5c0,0.7,0,1.3,0,2c-2.6,1.7-2.6,3.4,0,5c0,29.6,0,59.3,0.1,88.9C229.1,442.5,228.4,446.4,231.9,448.9z" />
<path class="workshop_Wall_3" d="M732.1,481c6.5-4,13.1-8,19.6-12c2.7-0.7,2.3-2.9,2.3-4.8c0-6.4,0-12.8,0-19.2c3.3,0,6.7,0,10,0
c0,5.5,0.3,11-0.1,16.5c-0.3,5,1.3,6.6,6.5,6.6c32.2-0.2,64.3-0.1,96.5-0.1c2.1,0,4.1,0,6.2,0c4.5,0,9,0,13.5,0
c27.1,0,54.1,0,81.2,0c8.3,0,8.3,0,8.3-8.5c0-3.2,0-6.3,0-9.5c4.1-0.6,2.9-3.9,2.9-6.3c0.1-32.4-0.4-64.9,2-97.2
c0.3-3.7,0.6-6.2,5-3.5c0,0.7,0,1.3,0,2c-2.6,1.7-2.6,3.4,0,5c0,29.8,0,59.6,0.1,89.4c0,3.4-0.5,7.1,2.9,9.5
c0,5.3,0.3,10.6,0,15.9c-0.1,3.6,1.1,5.7,4.3,7.5c4.8,2.6,9.8,4.9,13.8,8.6C915.4,481,823.8,481,732.1,481z" />
<path class="workshop_Wall_3" d="M613.9,448.9c0,5.3,0.3,10.6,0,15.9c-0.1,3.6,1.1,5.7,4.3,7.5c4.8,2.6,9.8,4.9,13.8,8.6
c-91.7,0-183.3,0-275,0c6.5-4,13.1-8,19.6-12c2.7-0.7,2.3-2.9,2.3-4.8c0-6.4,0-12.8,0-19.2c3.3,0,6.7,0,10,0
c0,5.5,0.3,11-0.1,16.5c-0.3,5,1.3,6.6,6.5,6.6c32.2-0.2,64.3-0.1,96.5-0.1c2.1,0,4.1,0,6.2,0c4.5,0,9,0,13.5,0
c27.1,0,54.1,0,81.2,0c8.3,0,8.3,0,8.3-8.5c0-3.2,0-6.3,0-9.5c4.1-0.6,2.9-3.9,2.9-6.3c0-32.4-0.3-64.9,2-97.2
c0.3-3.7,0.6-6.2,5-3.5c0,0.7,0,1.3,0,2c-2.6,1.7-2.6,3.4,0,5c0,29.6,0,59.3,0.1,88.9C611.1,442.5,610.4,446.4,613.9,448.9z" />
<path class="workshop_Wall_4" d="M732.1,481c91.7,0,183.3,0,275,0c3.5,2.5,2.1,6.2,1.5,9.1c-0.6,3-3.9,1.9-6,1.9c-87.9,0-175.8,0-263.6,0
C730.4,492,728.9,489.5,732.1,481z" />
<path class="workshop_Wall_4" d="M357.1,481c91.7,0,183.3,0,275,0c3.5,2.5,2.1,6.2,1.5,9.1c-0.6,3-3.9,1.9-6,1.9c-87.9,0-175.8,0-263.6,0
C355.4,492,353.9,489.5,357.1,481z" />
<path class="workshop_Wall_4" d="M-24.9,481c91.7,0,183.3,0,275,0c3.5,2.5,2.1,6.2
HTML5 SVG实现的圣诞节橱窗外雪景动画效果源码.zip （1个子文件） 
132686862258963300 
index.html 62KB资源评论
毕业_设计
- 粉丝: 1979
- 资源: 1万+
