<!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资源评论
易小侠
- 粉丝: 6598
- 资源: 9万+
最新资源
- 基于CSS与JavaScript的积分系统设计源码
- 生物化学作业_1_生物化学作业资料.pdf
- 基于libgdx引擎的Java开发连连看游戏设计源码
- 基于MobileNetV3的SSD目标检测算法PyTorch实现设计源码
- 基于Java JDK的全面框架设计源码学习项目
- 基于Python黑魔法原理的Python编程技巧设计源码
- 基于Python的EducationCRM管理系统前端设计源码
- 基于Django4.0+Python3.10的在线学习系统Scss设计源码
- 基于activiti6和jeesite4的dreamFlow工作流管理设计源码
- 基于Python实现的简单植物大战僵尸脚本设计源码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
