<!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 GSAP房屋搭建（盖房子）动画和日夜场景切换</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#toggleButton {
margin: 5%;
}
.day-toggle {
position: absolute;
right: 0%;
top: 0%;
}
.container {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
-moz-transition-property: background-color;
-o-transition-property: background-color;
-webkit-transition-property: background-color;
transition-property: background-color;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
.switch {
width: 100px;
height: 40px;
display: inline-block;
}
.switch input {
display: none;
}
.slider {
position: absolute;
background-color: white;
width: inherit;
height: inherit;
border-radius: 34px;
cursor: pointer;
}
.slider:before {
position: absolute;
left: 5px;
top: 5px;
content: "";
height: 30px;
width: 30px;
border-radius: 50px;
background-color: #469CCE;
transition: .4s, background-color 1s linear;
-webkit-transition: .4s, background-color 1s linear;
-moz-transition: .4s, background-color 1s linear;
-o-transition: .4s, background-color 1s linear;
}
input:checked + .slider:before {
background-color: #2c3e50;
}
input:checked + .slider:before {
-webkit-transform: translateX(60px);
-ms-transform: translateX(60px);
transform: translateX(60px);
}
</style>
</head>
<body>
<!-- start of container -->
<div id="background" class="container">
<!-- svg file -->
<svg id="svgout" height='100%' width='100%' viewBox="0 0 550 400" preserveAspectRatio="true">
<defs>
<g id="bottomShadow">
<path fill="#000000" stroke="none" d="
M 270.5 225.95
L 127.35 316.65 266.8 400 409.6 309.25 270.5 225.95 Z" />
</g>
<g id="Layer52_0_FILL">
<path class="topGrass" fill="#B9D668" stroke="none" d="
M 397.85 229.3
L 397.85 225.6 269.85 152 135.75 228.6 135.75 233.65 262.1 306.55 397.85 229.3 Z" />
</g>
<g id="Layer51_0_FILL">
<path class="leftSideGrass" fill="#6E9E4F" stroke="none" d="
M 135.1 229.95
L 135.1 256.85 262.1 328.4 262.1 301.85 135.1 229.95 Z" />
</g>
<g id="Layer50_0_FILL">
<path class="rightGrassTop" fill="#8CB154" stroke="none" d="
M 397.85 225.95
L 395.8 225.95 261.75 301.55 261.75 328.4 397.85 251.15 397.85 225.95 Z" />
</g>
<g id="Layer48_0_FILL">
<path class="crustLeftTop" fill="#955541" stroke="none" d="
M 135.45 282.4
L 135.75 298.15 262.1 372.1 261.75 355.65 135.45 282.4 Z" />
</g>
<g id="Layer47_0_FILL">
<path class="middleLeftCrust" fill="#C77E61" stroke="none" d="
M 135.1 270.3
L 135.1 283.05 275.9 364.35 271.85 348.9 135.1 270.3 Z" />
</g>
<g id="Layer46_0_FILL">
<path class="crustLeftTop" fill="#955541" stroke="none" d="
M 135.1 255.15
L 135.1 270.3 262.1 343.55 262.1 328.05 135.1 255.15 Z" />
</g>
<g id="Layer45_0_FILL">
<path class="topRightCrust" fill="#A47237" stroke="none" d="
M 397.5 294.5
L 397.5 277 261.75 355.3 261.75 372.75 397.5 294.5 Z" />
</g>
<g id="Layer44_0_FILL">
<path class="middleRightCrust" fill="#C89451" stroke="none" d="
M 397.5 269.95
L 397.15 266.6 262.1 343.2 262.1 355.95 397.5 279.7 397.5 269.95 Z" />
</g>
<g id="Layer43_0_FILL">
<path class="topRightCrust" fill="#A47237" stroke="none" d="
M 397.5 266.6
L 397.5 250.45 261.75 328.4 261.75 343.85 397.5 266.6 Z" />
</g>
<g id="Layer41_0_FILL">
<path class="greyRoad" fill="#B2B2B1" stroke="none" d="
M 295.05 283.05
Q 299.05 280.35 308.45 275.3 317.85 269.95 323.6 266.9
L 268.8 233.65 338.05 191.35 309.15 174.55 177.75 254.5
Q 191.55 262.2 198.25 266.25 204.65 269.95 209.7 271.95
L 241.6 250.45 295.05 283.05 Z" />
</g>
<g id="Layer40_0_FILL">
<path fill="#FFFFFF" stroke="none" d="
M 199.95 256.85
Q 194.55 261.2 191.9 262.2
L 194.9 263.9 200.95 259.2 199.95 256.85
M 225.8 243.75
L 224.8 241.75 211.05 250.8 212.05 252.8 225.8 243.75
M 308.15 275.65
L 296.7 266.6 295.35 268.6 306.8 277.7 308.15 275.65
M 275.9 253.5
L 274.55 255.5 285.95 264.55 287.3 262.55 275.9 253.5
M 251.7 227.3
L 250.7 225.25 236.9 234.35 237.9 236.35 251.7 227.3
M 257.05 240.7
L 254.05 240.7 268.8 249.8 269.5 247.75 257.05 240.7
M 277.2 207.8
L 263.45 216.85 264.45 218.9 278.25 209.8 277.2 207.8
M 305.1 192.65
L 304.1 190.65 290.3 199.75 291.35 201.75 305.1 192.65 Z" />
</g>
<g id="Layer38_0_FILL">
<path class="frontFascia" fill="#ECB27B" stroke="none" d="
M 359.25 187.95
L 346.4 174.95 333.85 202.9 359.25 187.95 Z" />
</g>
<g id="Layer37_0_FILL">
<path class="frontWall" fill="#EFA258" stroke="none" d="
M 334 201.05
L 334.35 232 359.2 217.55 359.25 187.95 334 201.05 Z" />
</g>
<g id="Layer36_0_FILL">
<path class="leftWall" fill="#C57F42" stroke="none" d="
M 334.35 232.3
L 334.35 205.1 305.1 191.35 305.1 216.85 334.35 232.3 Z" />
</g>
<g id="Layer35_0_FILL">
<path class="rightRoof" fill="#EF4427" stroke="none" d="
M 329.7 167.9
L 331.05 167.9 344.55 176.7 347.85 176.7 363 192.25 363.15 189.55 350.65 176.7 350.55 176.7 334.25 167.5 334.25 159.1 329.7 159.1 329.7 164.9 322.65 160.95 322.3 162.15 329.7 167 329.7 167.9 Z" />
</g>
<g id="Layer34_0_FILL">
<path class="leftRoof" fill="#F2563B" stroke="none" d="
M 334.05 207.05
L 350.65 176.7 322.1 160.45 302.1 192.05 334.05 207.05 Z" />
</g>
<g id="Layer30_0_FILL">
<path id="windowFour" class="windows" stroke="none" fill="#975A42" d="
M 341.35 203.3
Q 340.9 203.45 340.5 203.8 340.1 204.2 339.85 204.75 339.7 205 339.7 205.3 339.6 205.75 339.7 206.1 339.7 206.15 339.7 206.2 339.8 206.5 340 206.8 340.55 207.4 341.45 207.4 342.35 207.4 343 206.8 343.4 206.5 343.65 206.1 343.85 205.75 343.95 205.3 344.05 204.4 343.55 203.8 343.3 203.45 343 203.3 342.65 203.15 342.2 203.15 341.8 203.15 341.35 203.3
M 355.85 198.45
Q 355.8 198.2 355.6 198 355.1 197.4 354.2 197.4 353.35 197.4 352.6 198 351.85 198.65 351.7 199.55 351.7 199.7 351.7 199.85 351.6 200.5 352 201.05 352.55 201.65 353.45 201.65 354.3 201.65 355.05 201.05 355.45 200.7 355.7 200.25 355.8 200.05 355.9 199.85 355.95 199.7 355.95 199.55 356.05 198.95 355.85 198.45 Z"
/>
<path class="door" fill="#B65041" stroke="none" d="
M 351.95 211.2
L 351.8 211.2 346.05 215.1 346.05 225.2 351.95 221.6 351.95 211.2
M 351.2 211.2
L 351.35 211.2 351.35 211.1 351.2 211.2 Z" />
</g>
<g>
<path id="Layer30_0_FILL" fill="#000000" fill-opacity="1" stroke="none" d="
M 183.7 215.3
L 183.7 215.6
Q 187.25 231.75 212.25 234.35
L 183.7 215.3 Z" />
</g>
<g id="Layer29_0_FILL">
<path fill="#000000" fill-opacity="0.4" stroke="none" d="
M 305.1 216.85
L 305.15 217.2
Q 309.45 233.2 334.35 232.3
L 305.1 216.85 Z" />
<
