<!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伦敦城市场景动画：公交车钟楼摩天轮</title>
<style>
svg {
height: 350px;
overflow: hidden;
}
body {
background-color: #eadbd7;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#bus {
animation: drive 13s linear infinite;
-webkit-animation: drive 13s linear infinite;
-moz-animation: drive 13s linear infinite;
-o-animation: drive 13s linear infinite;
transform-origin: 50% 50%;
}
@keyframes drive {
0% {
transform: translateX(-300px);
}
100% {
transform: translateX(1500px);
}
}
</style>
</head>
<body>
<script src='js/TweenMax.min.js'></script>
<script src='js/DrawSVGPlugin.js?r=5'></script>
<div class="content">
<svg id="London" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1159.5 558.93">
<defs>
<style>
.cls-1,
.cls-11,
.cls-12,
.cls-5 {
fill: none;
}
.cls-1,
.cls-10,
.cls-11,
.cls-12,
.cls-2,
.cls-3,
.cls-4,
.cls-6,
.cls-8,
.cls-9 {
stroke: #5c6b83;
}
.cls-1,
.cls-10,
.cls-11,
.cls-12,
.cls-2,
.cls-3,
.cls-4,
.cls-5,
.cls-6,
.cls-8,
.cls-9 {
stroke-miterlimit: 10;
}
.cls-1,
.cls-2,
.cls-3,
.cls-4,
.cls-5,
.cls-8,
.cls-9 {
stroke-width: 3px;
}
.cls-2 {
fill: #b4b5b9;
opacity: 0.5;
}
.cls-3 {
fill: #98bab3;
}
.cls-10,
.cls-4,
.cls-6 {
fill: #fff;
}
.cls-5 {
stroke: #8b9fbc;
}
.cls-7 {
fill: #5c6b83;
}
.cls-8 {
fill: #e86e5c;
}
.cls-9 {
fill: #93a3b3;
}
.cls-10,
.cls-11 {
stroke-width: 2px;
}
</style>
</defs>
<title>london_city_scene</title>
<line id="ground" class="cls-1" y1="556.75" x2="1159.5" y2="556.75" />
<polygon id="buildings_2" class="cls-2" points="946.96 105.45 946.96 72.33 690.25 72.33 690.25 163.75 672.51 163.75 672.51 114.91 467.85 114.91 467.85 156.32 458.39 156.32 458.39 92.44 286.86 92.44 286.86 150.4 244.95 150.4 244.95 114.91 135.43 114.91 135.43 266.34 52.62 266.34 52.62 556.75 135.43 556.75 218.24 556.75 238.35 556.75 244.95 556.75 286.86 556.75 317.61 556.75 424.08 556.75 458.39 556.75 467.85 556.75 485.6 556.75 658.31 556.75 672.51 556.75 690.25 556.75 700.9 556.75 892.55 556.75 946.96 556.75 1094.84 556.75 1094.84 105.45 946.96 105.45"
/>
<polygon id="buildings_1" class="cls-3" points="1016.79 203.7 1016.79 138.79 757.62 138.79 757.62 203.7 731.13 203.7 731.13 257.79 659.25 257.79 659.25 203.7 628.98 203.7 628.98 158.62 508.85 158.62 508.85 203.7 428.45 203.7 428.45 138.79 161.72 138.79 161.72 203.7 104.96 203.7 104.96 312.52 33.08 312.52 33.08 556.75 104.96 556.75 161.72 556.75 214.68 556.75 244.95 556.75 358.46 556.75 428.45 556.75 508.85 556.75 579.75 556.75 628.98 556.75 659.25 556.75 731.13 556.75 757.62 556.75 831.4 556.75 867.34 556.75 897.61 556.75 1016.79 556.75 1122.73 556.75 1122.73 203.7 1016.79 203.7"
/>
<g id="gherkin">
<path class="cls-4" d="M1043.56,73.22h-25.84a12.28,12.28,0,0,0-8.69,3.84c-46.16,46.32-90.73,182.09-90.73,325.32,0,88.14,12.5,167.95,32.71,225.82h159c20.21-57.87,32.71-137.68,32.71-225.82,0-143.23-44.32-279-90.46-325.32A12.28,12.28,0,0,0,1043.56,73.22Z"
transform="translate(-100.25 -71.71)" />
<path class="cls-1" d="M981.5,115.61a338.43,338.43,0,0,0,49.26,3.61,338.44,338.44,0,0,0,49.24-3.61" transform="translate(-100.25 -71.71)" />
<path class="cls-5" d="M981.5,115.61c6.09,37.37,20.73,102.26,59.23,168.9,35.66,61.72,76.46,98.4,102,117.87" transform="translate(-100.25 -71.71)" />
<path class="cls-5" d="M966.31,147.07c5.85,36.48,22.16,97.16,61.17,163.67,40.72,69.44,88.6,107,115.23,124.7" transform="translate(-100.25 -71.71)" />
<path class="cls-1" d="M926.16,296.56A608.32,608.32,0,0,0,984.5,411c50.12,76.46,106.11,121.33,144.19,146.35" transform="translate(-100.25 -71.71)" />
<path class="cls-1" d="M921.09,339.72a573,573,0,0,0,40.6,80.72c53.2,87.46,117.27,136.9,161.13,163.85" transform="translate(-100.25 -71.71)" />
<path class="cls-5" d="M1077.82,115.61a489.23,489.23,0,0,1-59.23,165.48c-35.66,61.72-74.76,99.53-100.27,119" transform="translate(-100.25 -71.71)" />
<path class="cls-5" d="M1093,143.65c-5.85,36.48-22.16,97.16-61.17,163.67-40.72,69.44-86.43,107-113.06,124.7" transform="translate(-100.25 -71.71)" />
<path class="cls-1" d="M1133.94,290.17c-13,33.66-32.37,76.57-59.12,117.38C1024.71,484,968.71,528.88,930.63,553.91" transform="translate(-100.25 -71.71)" />
<path class="cls-1" d="M1139.26,332.26c-10.39,25.38-24.66,56.87-41.62,84.75-53.2,87.46-117.27,136.9-161.13,163.85" transform="translate(-100.25 -71.71)" />
<path class="cls-1" d="M980.81,115.61a338.43,338.43,0,0,0,49.26,3.61,338.44,338.44,0,0,0,49.24-3.61" transform="translate(-100.25 -71.71)" />
<path class="cls-1" d="M1043.71,73.21h-25.84a12.28,12.28,0,0,0-8.69,3.84C963,123.37,918.46,259.14,918.46,402.37c0,88.14,12.5,167.95,32.71,225.82h159c20.21-57.87,32.71-137.68,32.71-225.82,0-143.23-44.32-279-90.46-325.32A12.28,12.28,0,0,0,1043.71,73.21Z"
transform="translate(-100.25 -71.71)" />
</g>
<g id="bigben">
<g id="Big_Ben" data-name="Big Ben">
<rect class="cls-4" x="181.14" y="171.15" width="95" height="80.98" rx="1.72" ry="1.72" />
<path class="cls-4" d="M184.34,526.15h87.42a7.22,7.22,0,0,1,7.22,7.22v22.78a0,0,0,0,1,0,0H177.12a0,0,0,0,1,0,0V533.37A7.22,7.22,0,0,1,184.34,526.15Z" />
<rect class="cls-4" x="185.61" y="252.13" width="85.73" height="274.02" />
<path class="cls-4" d="M189.53,149.07h79.6a3.07,3.07,0,0,1,3.07,3.07v18.59a0,0,0,0,1,0,0H186.46a0,0,0,0,1,0,0V152.14A3.07,3.07,0,0,1,189.53,149.07Z" />
<path class="cls-4" d="M370.81,220.78H288.43V215c0-1.92,1.56-3.48,3.48-4.48h75.43c1.92,1,3.48,2.56,3.48,4.48Z" transform="translate(-100.25 -71.71)" />
<polygon class="cls-4" points="267.95 138.79 190.7 138.79 201.14 113.15 257.14 113.15 267.95 138.79" />
<rect class="cls-4" x="195.14" y="177.15" width="68" height="67.43" />
<ellipse class="cls-4" cx="229.27" cy="210.86" rx="33.87" ry="33.72" />
<line class="cls-4" x1="201.14" y1="90.15" x2="256.64" y2="90.15" />
<line class="cls-4" x1="195.14" y1="170.73" x2="195.14" y2="252.13" />
<path class="cls-4" d="M337.39,108.42h-14L303,159.95a8.81,8.81,0,0,0-.62,3.06l-.47,21.42h55.5V162.54
HTML5+SVG实现的伦敦城市公交车、钟楼、摩天轮场景动画效果源码.zip
版权申诉
106 浏览量
2022-11-03
23:51:40
上传
评论
收藏 39KB ZIP 举报
HTML5+SVG实现的伦敦城市公交车、钟楼、摩天轮场景动画效果源码.zip （3个子文件） 
132689835394374916 
index.html 17KB js 
DrawSVGPlugin.js 3KB TweenMax.min.js 99KB资源评论
毕业_设计
- 粉丝: 1944
- 资源: 1万+
最新资源
- fdsfdsfdsfdsfdsfdsfdsfds
- 目标检测-零售食品LOGO检测数据集-5000张图-+对应VOC-COCO-YOLO三种格式标签+数据集划分脚本
- 目标检测-零售食品LOGO检测数据集-1000张图-+对应VOC-COCO-YOLO三种格式标签+数据集划分脚本
- 计算机科学选修课：人工智能导论 第四节 PPT
- 计算机科学选修课：人工智能导论 第三节 PPT
- Delphi 12 控件之LMD.VCL.Full.Version.zip
- 常用阀门定位器的调试步骤及说明
- 计算机科学选修课：人工智能导论 第二节 PPT
- 计算机科学选修课：人工智能导论 第一章 PPT
- Delphi 12 控件Indy-Indy-10.6.3.3.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
