<!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>TweenMax.js SVG 城市生活景观动画</title>
<style>
body {
margin: 0
}
.st0 {
fill: #faaf41;
}
.st1 {
opacity: 0.1;
}
.st2 {
fill: #96a2a3;
}
.st3 {
fill: #fff;
}
.st4 {
opacity: 0.3;
}
.st5 {
fill: #7b421c;
}
.st6 {
fill: #d1de46;
}
.st7 {
fill: #90b43e;
}
.st8 {
fill: #5e5f61;
}
.st9 {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-miterlimit: 10;
}
.st10 {
fill: #819c3d;
}
.st11 {
opacity: 0.2;
fill: #fff;
}
.st12 {
fill: #855323;
}
.st13 {
fill: #ad6729;
}
.st14 {
fill: #3f8253;
}
.st15 {
opacity: 0.2;
fill: #58ae63;
}
.st16 {
fill: none;
}
.st17 {
fill: #e64543;
}
.st18 {
fill: #a83430;
}
.st19 {
fill: #6e3f19;
}
.st20 {
fill: #ea4548;
}
.st21 {
fill: #fad10d;
}
.st22 {
fill: #cdeaeb;
}
.st23 {
fill: #862a35;
}
.st24 {
fill: #45130c;
}
.st25 {
fill: #c1e1de;
}
.st26 {
fill: #9ad5db;
}
.st27 {
fill: none;
stroke: #fecb81;
stroke-miterlimit: 10;
}
.st28 {
fill: #b31f24;
}
.st29 {
fill: #ca3527;
}
.st30 {
fill: #dc4226;
}
.st31 {
fill: #f26328;
}
.st32 {
fill: #5cc4b9;
}
.st33 {
fill: #ed1c24;
}
.st34 {
fill: #3d928c;
}
.st35 {
fill: #246a66;
}
.st36 {
fill: #b4774c;
}
.st37 {
fill: #a92e2b;
}
.st38 {
fill: #eaf6f7;
}
.st39 {
fill: #bd3834;
}
.st40 {
fill: #c23c39;
}
.st41 {
fill: #eaf6f8;
}
.st42 {
fill: #a0dae2;
}
.st43 {
fill: #cbebf6;
}
.st44 {
fill: #8dcea9;
}
.st45 {
fill: #ededee;
}
.st46 {
fill: #0d475f;
}
.st47 {
fill: #f6ae41;
stroke: #fff;
stroke-miterlimit: 10;
}
.st48 {
fill: #f36f43;
}
.st49 {
fill: none;
stroke: #000;
stroke-miterlimit: 10;
}
svg {
margin: 0 auto;
display: block;
max-width: 100%;
max-height: 100vh;
height: auto;
width: auto;
}
</style>
</head>
<body>
<script src='js/TweenMax.min.js'></script>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:a="https://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="841.9px" height="595.3px" viewBox="0 0 841.9 595.3" style="enable-background:new 0 0 841.9 595.3;"
xml:space="preserve">
<defs>
</defs>
<rect id="background" class="st0" width="841.9" height="595.3" />
<g id="landcontainer">
<g id="land">
<path id="mountain_far" class="st1" d="M570,439.5L431,238.6c0.1,0.1,0.1,0.2,0.1,0.2L382.8,169l-1.2,1.7v-0.8l-53.5,73.8
L186.6,438.7h0.6l-0.6,0.8H570z" />
<g id="mountains">
<g id="mountain_big">
<polygon class="st2" points="530.6,75.1 475.9,176.4 334.4,438.5 717.8,438.5" />
<path class="st3" d="M479.9,169c0,0,7.5-8.5,14.7,0c7.2,8.5,27,8.6,36-3.8c9-12.4,14.4,6.3,18,9.8c3.6,3.5,8.5,2.4,13.2-14
c4.7-16.3,17.1,7.8,17.1,7.8l-48.3-93.8L479.9,169z" />
<polygon class="st4" points="529.4,76.2 475.9,175.3 334.4,437.4 529.4,437.4" />
</g>
<g id="mountain_small">
<polygon class="st2" points="249.6,211.9 210.8,274.6 110.5,436.6 382.4,436.6" />
<path class="st3" d="M213.6,270c0,0,5.3-5.2,10.4,0c5.1,5.2,19.1,5.3,25.5-2.3c6.4-7.7,10.2,3.9,12.8,6c2.6,2.1,6,1.5,9.4-8.6
c3.3-10.1,12.1,4.8,12.1,4.8l-34.3-58L213.6,270z" />
<polygon class="st4" points="248.8,212.6 210.8,273.9 110.5,435.9 248.8,435.9" />
</g>
</g>
<g id="ground_7">
<path id="soil" class="st5" d="M112.8,520.1c28.4,8,56.2,20.2,84.4,29.9c13.5,4.7,27.1,7.8,40.9,9.8c11.9,1.7,28.7,3,40.6,1.8
c31.6-3.1,59.3-12.7,89.7-26.9c0,0,35.1-16.5,71.3,1.7c22.1,11.1,43,25.4,66.2,31.1c16.9,4.1,34.1,4.6,51.2,2.3
c56.7-7.6,110.3-49.8,167.8-49.8C724.7,520.1,112.8,520.1,112.8,520.1z" />
<g id="grass">
<path class="st6" d="M766,505.1c0,9.2-8.7,16.6-19.4,16.6H96.8c-10.7,0-19.4-7.4-19.4-16.6l0,0c0-9.2,8.7-16.6,19.4-16.6h649.8
C757.3,488.5,766,495.9,766,505.1L766,505.1z" />
<path class="st7" d="M96.9,521.7h649.8c10.7,0,19.4-7.4,19.4-16.6H77.4C77.4,514.3,86.1,521.7,96.9,521.7z" />
</g>
<g id="road">
<path class="st8" d="M816.9,462.8c0,15.7-10,28.4-22.4,28.4H47.4C35,491.2,25,478.5,25,462.8l0,0c0-15.7,10-28.4,22.4-28.4h747.1
C806.9,434.4,816.9,447.1,816.9,462.8L816.9,462.8z" />
<g>
<line class="st9" x1="43.4" y1="462.8" x2="100.3" y2="462.8" />
<line class="st9" x1="143.7" y1="462.8" x2="200.6" y2="462.8" />
<line class="st9" x1="244" y1="462.8" x2="300.9" y2="462.8" />
<line class="st9" x1="344.3" y1="462.8" x2="401.2" y2="462.8" />
<line class="st9" x1="444.6" y1="462.8" x2="501.5" y2="462.8" />
<line class="st9" x1="544.9" y1="462.8" x2="601.8" y2="462.8" />
<line class="st9" x1="645.2" y1="462.8" x2="702.1" y2="462.8" />
<line class="st9" x1="745.5" y1="462.8" x2="802.4" y2="462.8" />
</g>
</g>
</g>
<g id="trees">
<g class="tree" id="tree_25">
<g>
<ellipse class="st10" cx="752.1" cy="400" rx="7.2" ry="5.1" />
<path class="st11" d="M752.1,394.9c-4,0-7.2,2.3-7.2,5.1s3.2,5.1,7.2,5.1V394.9z" />
</g>
<g>
<ellipse class="st10" cx="778.7" cy="382.7" rx="7.2" ry="5.1" />
<path class="st11" d="M778.7,377.6c-4,0-7.2,2.3-7.2,5.1c0,2.8,3.2,5.1,7.2,5.1V377.6z" />
</g>
<g>
<rect x="770.6" y="407.7" transform="matrix(0.7847 0.6199 -0.6199 0.7847 422.6273 -389.0011)" class="st12" width="1.2" height="12.2" />
<rect x="770.7" y="407.5" transform="matrix(0.7861 0.6181 -0.6181 0.7861 420.6386 -388.1013)" class="st13" width="0.6" height="12.2" />
</g>
<g>
<rect x="769.4" y="404.2" transform="matrix(0.7846 0.62 -0.62 0.7846 420.2206 -389.0078)" class="st12" width="1.2" height="12.2" />
<rect x="769.5" y="404" transform="matrix(0.7861 0.6181 -0.6181 0.7861 418.207 -388.0909)" class="st13" width="0.6" height="12.2" />
</g>
<g>
<rect x="761.1" y="402.8" transform="matrix(0.632 -0.775 0.775 0.632 -36.6445 740.7395)" class="st12" width="1.2" height="12.2" />
<rect x="761.2" y="403.1" transform="matrix(0.6308 -0.776 0.776 0.6308 -36.3582 741.97)" class="st13" width="0.6" height="12.2" />
</g>
<g>
<rect x="765.2" y="405.5" class="st12" width="3.7" height="29.9" />
<rect x="765.2" y="405.5" class="st13" width="1.8" height="29.9" />
</g>
<g>
<ellipse class="st10" cx="768" cy="393.9" rx="21.7" ry="15.4" />
<path class="st11" d="M768,378.5c-12,0-21.7,6.9-21.7,15.4c0,8.5,9.7,15.4,21.7,15.4V378.5z" />
</g>
HTML5+TweenMax.js+SVG实现城市生活景观动画效果源码.zip （2个子文件） 
132686844220662367 
index.html 59KB js 
TweenMax.min.js 101KB资源评论
易小侠
- 粉丝: 6636
- 资源: 9万+
最新资源
- 神经网络 使用手写字数据集 实现分割任务 CNN
- 基于maxwell的4极6槽 内转子 11000rpm 输出转矩 156mNm 效率85% 180W 外径 48mm 内径27 轴向长度30mm 直流母线36V 永磁同步电机（永磁直流无刷）模型
- FPGA开发：SDRAM驱动代码，使用串口向sdram写数据，数据环回后被SDRAM送回到串口进行输出，中间使用FIFO进行跨时钟域处理，所用开发板DE2-115，SDRAM型号IS42S16320D
- ZTE C600&C620&C650命令参考
- python-workspace.zip.006
- FX5U FX40SSC 程序 FX5U FX 40SSC运动控制模块程序块 自己整合的针对FX 40SSC模块的功能块，支持点动故障码 状态码 相对定位 绝对定位 直接1指定轴号就可以
- 汽车二、三自由度模型 汽车二、三自由度模型 本人用了三种不同方法搭的汽车线性二自由度simulink模型，文档里包含有具体的车辆数值 适合初学者学习simulink使用(ps.模型输入为前轮转角，输出
- KUKA机器人码垛程序备份
- dbstudio-3.8.5.102.win64 神通数据库连接工具
- 开源TVBox影视盒子 小苹果影视盒子V1.5.7 2025新版
- 基于国产M0核MCU平台，全开源双电阻采样FOC高压 风机量产程序，包含龙博格电机观测器，SVPWM，顺逆风启动，五段式与七段式调制等源码，完全可以移植到别的MCU平台 适合电机算法研究
- 交替迭代法 matlab 无功优化 通过含固态变压器的无功优化算法，形成交替迭代潮流计算，最终计算出符合预期的电压曲线，程序方法包括包括牛拉法 前推回代等，参考性强
- 综合能源耦合微网优化程序matlab 程序基于冷热电联供综合能源耦合模型，采用cchp，并且含有压缩空气储能，采用粒子群优化求解
- DataGrip 2021.3 数据库连接工具
- 考虑碳交易的微网优化模型matlab
- FreeRTOS 是一款开源的、可抢占式的实时操作系统.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
