<!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" />
<
HTML5 GSAP实现的房屋搭建及日夜场景切换动画特效源码.zip （2个子文件） 
132689835122624414 
index.html 30KB js 
TweenMax.min.js 112KB资源评论
Miya能毕业嘛2024-11-30感谢资源主分享的资源解决了我当下的问题，非常有用的资源。
易小侠
- 粉丝: 6624
- 资源: 9万+
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减3.57元 开通VIP
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
