line+css实现摇滚半程马拉松动画效果
代码语言：html
所属分类：动画
代码描述：line+css实现摇滚半程马拉松动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
:root {
--opacity-start: 0.4;
--minor-rotate-dur: 1s;
--ferris-wheel-del: 0s;
--ferris-wheel-dur: 20s;
--eiffel-opacity-del: 1s;
--eiffel-opacity-dur: 5s;
--balloon-lines-del: 2s;
--balloon-lines-dur: 4s;
--luxor-light-del: 3s;
--luxor-light-dur: 5s;
--sign-opacity-del: 5s;
--sign-opacity-dur: 10s;
--excalibur-opacity-del: 7s;
--excalibur-opacity-dur: 10s;
}
body {
background-color: #222;
display: flex;
justify-content: center;
}
.rnr {
height: 95vh;
margin-top: 1vh;
}
#ferris-wheel #wheel {
transform-origin: 600.98px 658.5px;
transform: rotate(0deg);
animation: ferris-wheel var(--ferris-wheel-dur) linear var(--ferris-wheel-del) infinite;
}
@keyframes ferris-wheel {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#diamond {
transform-box: fill-box;
transform-origin: center center;
transform: rotate(0deg);
animation: shake-left var(--minor-rotate-dur) linear infinite;
}
#martini-glass {
transform-box: fill-box;
transform-origin: center center;
transform: rotate(0deg);
animation: shake-left var(--minor-rotate-dur) linear infinite;
}
#music-note {
transform-box: fill-box;
transform-origin: center center;
transform: rotate(0deg);
animation: shake-right var(--minor-rotate-dur) linear infinite;
}
#welcome-sign .sign-letter {
opacity: var(--opacity-start);
}
#welcome-sign #sign-outline {
opacity: 1;
}
#welcome-sign #sign-outline line, #welcome-sign #sign-outline path {
animation: opacity-sign-outline var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-outline {
0%, 55% {
opacity: 1;
}
55.1%, 58% {
opacity: var(--opacity-start);
}
58.1%, 61% {
opacity: 1;
}
61.1%, 64% {
opacity: var(--opacity-start);
}
64.1%, 99.9% {
opacity: 1;
}
100% {
opacity: var(--opacity-start);
}
}
#welcome-sign #sign-w {
animation: opacity-sign-w var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-w {
0%, 9.9% {
opacity: var(--opacity-start);
}
10%, 55% {
opacity: 1;
}
55.1%, 58% {
opacity: var(--opacity-start);
}
58.1%, 61% {
opacity: 1;
}
61.1%, 64% {
opacity: var(--opacity-start);
}
64.1%, 99.9% {
opacity: 1;
}
100% {
opacity: var(--opacity-start);
}
}
#welcome-sign #sign-e-1 {
animation: opacity-sign-e-1 var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-e-1 {
0%, 14.9% {
opacity: var(--opacity-start);
}
15%, 55% {
opacity: 1;
}
55.1%, 58% {
opacity: var(--opacity-start);
}
58.1%, 61% {
opacity: 1;
}
61.1%, 64% {
opacity: var(--opacity-start);
}
64.1%, 99.9% {
opacity: 1;
}
100% {
opacity: var(--opacity-start);
}
}
#welcome-sign #sign-l {
animation: opacity-sign-l var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-l {
0%, 19.9% {
opacity: var(--opacity-start);
}
20% {
opacity: 1;
}
55% {
opacity: 1;
}
55.1%, 58% {
opacity: var(--opacity-start);
}
58.1%, 61% {
opacity: 1;
}
61.1%, 64% {
opacity: var(--opacity-start);
}
64.1%, 99.9% {
opacity: 1;
}
100% {
opacity: var(--opacity-start);
}
}
#welcome-sign #sign-c {
animation: opacity-sign-c var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-c {
0%, 24.9% {
opacity: var(--opacity-start);
}
25% {
opacity: 1;
}
55% {
opacity: 1;
}
55.1%, 58% {
opacity: var(--opacity-start);
}
58.1%, 61% {
opacity: 1;
}
61.1%, 64% {
opacity: var(--opacity-start);
}
64.1%, 99.9% {
opacity: 1;
}
100% {
opacity: var(--opacity-start);
}
}
#welcome-sign #sign-o {
animation: opacity-sign-o var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-o {
0%, 29.9% {
opacity: var(--opacity-start);
}
30% {
opacity: 1;
}
55% {
opacity: 1;
}
55.1%, 58% {
opacity: var(--opacity-start);
}
58.1%, 61% {
opacity: 1;
}
61.1%, 64% {
opacity: var(--opacity-start);
}
64.1%, 99.9% {
opacity: 1;
}
100% {
opacity: var(--opacity-start);
}
}
#welcome-sign #sign-m {
animation: opacity-sign-m var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-m {
0%, 34.9% {
opacity: var(--opacity-start);
}
35% {
opacity: 1;
}
55% {
opacity: 1;
}
55.1%, 58% {
opacity: var(--opacity-start);
}
58.1%, 61% {
opacity: 1;
}
61.1%, 64% {
opacity: var(--opacity-start);
}
64.1%, 99.9% {
opacity: 1;
}
100% {
opacity: var(--opacity-start);
}
}
#welcome-sign #sign-e-2 {
animation: opacity-sign-e-2 var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-e-2 {
0%, 39.9% {
opacity: var(--opacity-start);
}
40% {
opacity: 1;
}
55% {
opacity: 1;
}
55.1%, 58% {
opacity: var(--opacity-start);
}
58.1%, 61% {
opacity: 1;
}
61.1%, 64% {
opacity: var(--opacity-start);
}
64.1%, 99.9% {
opacity: 1;
}
100% {
opacity: var(--opacity-start);
}
}
#welcome-sign #welcome-date {
animation: opacity-sign-date var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-date {
0%, 44.9% {
opacity: var(--opacity-start);
}
45% {
opacity: 1;
}
55% {
opacity: 1;
}
55.1%, 58% {
opacity: var(--opacity-start);
}
58.1%, 61% {
opacity: 1;
}
61.1%, 64% {
opacity: var(--opacity-start);
}
64.1%, 99.9% {
opacity: 1;
}
100% {
opacity: var(--opacity-start);
}
}
#eiffel-tower #eiffel-tower-1 {
animation: opacity-eiffel-1 var(--eiffel-opacity-dur) linear var(--eiffel-opacity-del) infinite;
}
@keyframes opacity-eiffel-1 {
0%, 10% {
opacity: var(--opacity-start);
}
10.1%, 100% {
opacity: 1;
}
}
#eiffel-tower #eiffel-tower-2 {
animation: opacity-eiffel-2 var(--eiffel-opacity-dur) linear var(--eiffel-opacity-del) infinite;
}
@keyframes opacity-eiffel-2 {
0%, 15% {
opacity: var(--opacity-start);
}
15.1%, 100% {
opacity: 1;
}
}
#eiffel-tower #eiffel-tower-3 {
animation: opacity-eiffel-3 var(--eiffel-opacity-dur) linear var(--eiffel-opacity-del) infinite;
}
@keyframes opacity-eiffel-3 {
0%, 20% {
opacity: var(--opacity-start);
}
20.1%, 100% {
opacity: 1;
}
}
#eiffel-tower #eiffel-tower-4 {
animation: opacity-eiffel-4 var(--eiffel-opacity-dur) linear var(--eiffel-opacity-del) infinite;
}
@keyframes opacity-eiffel-4 {
0%, 25% {
opacity: var(--opacity-start);
}
25.1%, 100% {
opacity: 1;
}
}
#eiffel-tower #eiffel-tower-5 {
animation: opacity-eiffel-5 var(--eiffel-opacity-dur) linear var(--eiffel-opacity-del) infinite;
}
@keyframes opacity-eiffel-5 {
0%, 30% {
opacity: var(--opacity-start);
}
30.1%, 100% {
opacity: 1;
}
}
#eiffel-tower #eiffel-tower-6 {
animation: opacity-eiffel-6 var(--eiffel-opacity-dur) linear var(--eiffel-opacity-del) infinite;
}
@keyframes opacity-eiffel-6 {
0%, 35% {
opacity: var(--opacity-start);
}
35.1%, 100% {
opacity: 1;
}
}
#heart {
transform-box: fill-box;
transform-origin: center center;
transform: rotate(0deg);
animation: shake-right var(--minor-rotate-dur) linear infinite;
}
#luxor #light-bg {
opacity: var(--opacity-start);
}
#luxor #light #middle-light {
stroke-dasharray: 116;
stroke-dashoffset: 0;
animation: luxor-light-middle var(--luxor-light-dur) linear var(--luxor-light-del) infinite;
}
@keyframes luxor-light-middle {
0% {
stroke-dashoffset: 116;
}
10%, 70% {
stroke-dashoffset: 0;
}
70.1%, 100% {
stroke-dashoffset: 116;
}
}
#luxor #light #left-yellow-light {
stroke-dasharray: 100;
stroke-dashoffset: 0;
animation: luxor-light-left-yellow var(--luxor-light-dur) linear var(--luxor-light-del) infinite;
}
@keyframes luxor-light-left-yellow {
0% {
stroke-dashoffset: 100;
}
10%, 70% {
stroke-dashoffset: 0;
}
70.1%, 100% {
stroke-dashoffset: 100;
}
}
#luxor #light #right-yellow-light {
stroke-dasharray: 100;
stroke-dashoffset: 0;
animation: luxor-light-right-yellow var(--luxor-light-dur) linear var(--luxor-light-del) infinite;
}
@keyframes luxor-light-right-yellow {
0% {
stroke-dashoffset: 100;
}
10%, 70% {
stroke-dashoffset: 0;
}
70.1%, 100% {
stroke-dashoffset: 100;
}
}
#luxor #light #right-white-light {
stroke-dasharray: 119;
stroke-dashoffset: 0;
animation: luxor-light-right-white var(--luxor-light-dur) linear var(--luxor-light-del) infinite;
}
@keyframes luxor-light-right-white {
0% {
stroke-dashoffset: 119;
}
10%, 70% {
stroke-dashoffset: 0;
}
70.1%, 100% {
stroke-dashoffset: 119;
}
}
#luxor #light #left-white-light {
stroke-dasharray: 103;
stroke-dashoffset: 0;
animation: luxor-light-left-white var(--luxor-light-dur) linear var(--luxor-light-del) infinite;
}
@keyframes luxor-light-left-white {
0% {
stroke-dashoffset: 103;
}
10%, 70% {
stroke-dashoffset: 0;
}
70.1%, 100% {
stroke-dashoffset: 103;
}
}
#excalibur #left-tower {
animation: opacity-excalibur-1 var(--excalibur-opacity-dur) linear var(--excalibur-opacity-del) infinite;
}
@keyframes opacity-excalibur-1 {
0%, 10% {
opacity: var(--opacity-start);
}
10.1%, 100% {
opacity: 1;
}
}
#excalibur #center-tower {
animation: opacity-excalibur-2 var(--excalibur-opacity-dur) linear var(--excalibur-opacity-del) infinite;
}
@keyframes opacity-excalibur-2 {
0%, 15% {
opacity: var(--opacity-start);
}
15.1%, 100% {
opacity: 1;
}
}
#excalibur #right-tower {
animation: opacity-excalibur-3 var(--excalibur-opacity-dur) linear var(--excalibur-opacity-del) infinite;
}
@keyframes opacity-excalibur-3 {
0%, 20% {
opacity: var(--opacity-start);
}
20.1%, 100% {
opacity: 1;
}
}
#statue-of-liberty #flame {
transform-box: fill-box;
transform-origin: bottom center;
transform: rotate(0deg);
animation: diamond var(--minor-rotate-dur) linear infinite;
}
@keyframes diamond {
0%, 24.9% {
transform: rotate(0deg);
}
25%, 74.9% {
transform: rotate(-8deg);
}
75%, 100% {
transform: rotate(0deg);
}
}
#spade, #diamond-2 {
transform-box: fill-box;
transform-origin: center center;
transform: rotate(0deg);
animation: shake-left var(--minor-rotate-dur) linear infinite;
}
#clover-leaf {
transform-box: fill-box;
transform-origin: center center;
transform: rotate(0deg);
animation: shake-right var(--minor-rotate-dur) linear infinite;
}
#dice {
transform-box: fill-box;
transform-origin: center center;
transform: rotate(0deg);
animation: shake-right var(--minor-rotate-dur) linear infinite;
}
.balloon-line-left {
stroke-dasharray: 500;
stroke-dashoffset: 0;
animation: balloon-lines-left var(--balloon-lines-dur) linear var(--balloon-lines-del) infinite;
}
@keyframes balloon-lines-left {
0% {
stroke-dashoffset: 500;
}
60%, 90% {
stroke-dashoffset: 0;
}
90.1%, 100% {
stroke-dashoffset: 500;
}
}
.balloon-line-right {
stroke-dasharray: 500;
stroke-dashoffset: 0;
animation: balloon-lines-right var(--balloon-lines-dur) linear var(--balloon-lines-del) infinite;
}
@keyframes balloon-lines-right {
0%, 16% {
stroke-dashoffset: 500;
}
60%, 90% {
stroke-dashoffset: 0;
}
90.1%, 100% {
stroke-dashoffset: 500;
}
}
.balloon-line-bg {
opacity: var(--opacity-start);
}
@keyframes shake-left {
0%, 24.9% {
transform: rotate(0deg);
}
25%, 74.9% {
transform: rotate(-10deg);
}
75%, 100% {
transform: rotate(0deg);
}
}
@keyframes shake-right {
0%, 24.9% {
transform: rotate(0deg);
}
25%, 74.9% {
transform: rotate(10deg);
}
75%, 100% {
transform: rotate(0deg);
}
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<svg class="rnr" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 790.59 1071">
<defs>
<style>
.cls-1, .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-19, .cls-2, .cls-20, .cls-21, .cls-23, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9 {
fill: none;
}
.cls-1 {
stroke: #e0e0e0;
}
.cls-1, .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-19, .cls-20, .cls-21, .cls-3, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9 {
stroke-linecap: round;
}
.cls-1, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-2, .cls-20, .cls-23, .cls-3, .cls-4, .cls-5, .cls-6, .cls-8 {
stroke-miterlimit: 10;
}
.cls-1, .cls-11, .cls-12, .cls-19, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-9 {
stroke-width: 6px;
}
.cls-2, .cls-5 {
stroke: #9bec77;
}
.cls-10, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-3, .cls-4, .cls-9 {
stroke: #fff;
}
.cls-24, .cls-6, .cls-7 {
stroke: #1abcda;
}
.cls-10, .cls-19, .cls-21, .cls-24, .cls-7, .cls-9 {
stroke-linejoin: round;
}
.cls-12, .cls-8 {
stroke: #feed81;
}
.cls-8 {
stroke-width: 9px;
}
.cls-10, .cls-13 {
stroke-width: 7px;
}
.cls-11, .cls-19, .cls-20, .cls-21, .cls-23 {
stroke: #ff7fcf;
}
.cls-14 {
stroke-width: 7.5px;
}
.cls-14, .cls-15, .cls-16 {
opacity: 0.98;
}
.cls-15 {
stroke-width: 8px;
}
.cls-16 {
stroke-width: 6.5px;
}
.cls-17, .cls-20 {
stroke-width: 4.25px;
}
.cls-18 {
fill: #9bec77;
}
.cls-22 {
fill: #ff7fcf;
}
.cls-23 {
stroke-width: 2px;
}
.cls-24 {
fill: #1abcda;
}
</style>
</defs>
<title>las-vegas-half</title>
<g id="hot-air-balloon">
<path class="cls-3" d="M52.42,548.58c1.6-.61,3.21-1.19,4.82-1.76" />
<path class="cls-3" d="M226.73,552.85a57.37,57.37,0,0,1,4.91,3.75" />
<path class="cls-3" d="M208.74,544.35c1.84.59,3.65,1.23,5.45,1.94" />
<path class="cls-3" d="M177.8,538.59c4.66.5,9.31,1.06,13.93,1.81" />
<path class="cls-3" d="M34.39,558.29a65.11,65.11,0,0,1,6.84-4.14" />
<path class="cls-3" d="M140,535.72c7.85.09,15.69.09,23.54.3" />
<path class="cls-3" d="M102.13,537.61c8-1,16-1.56,24.09-1.81" />
<path class="cls-3" d="M72.15,543.06q8.19-2.09,16.53-3.5" />
<path id="outer-balloon" class="cls-5" d="M259.45,631c0-.83,0-1.66,0-2.5C262.48,551,206.05,489,134,489S4.63,552,3.48,628.5c-.49,32.48,8.34,60,25,82.5,17.44,23.58,44,40,60,55" />
<path class="cls-3" d="M21.33,669.76c-.9.49-1.8,1-2.68,1.51" />
<path class="cls-3" d="M30.33,692.76c-.9.49-1.8,1-2.68,1.51" />
<path class="cls-5 balloon-line-left" d="M120.48,761l-1-10-2-8a364.6,364.6,0,0,1-19-57c-2.1-8.59-3-20-4.49-32-2.28-18.34-4.51-40-3.51-65,.72-18.08-.14-33.92,4-49,4.6-16.76,13-30.36,19-43" />
<path class="cls-5 balloon-line-left" d="M111.48,763l-2-9-2.33-7a11.16,11.16,0,0,0-2-3.64C95.49,731.76,85,718.39,75.48,697c-4-9-10.51-23-12-35-2.28-18.33-7-32-6-57,.72-18.08-.14-33.92,4-49a139.35,139.35,0,0,1,22-45" />
<path class="cls-5 balloon-line-left" d="M100.48,764l-2-9-2.33-7a11.16,11.16,0,0,0-2-3.64C84.49,732.76,72.48,725,59.48,705c-5.37-8.26-12-18.64-16-30-6-17-9-22-12-47a146.45,146.45,0,0,1,2-48c3.41-17,10-33,19-45" />
<path class="cls-5 balloon-line-left" d="M82.48,746c-10.66-9.75-25-21-34-33-27-37-41-82-28.44-125.47" />
<path class="cls-5 balloon-line-left" d="M138.23,761c-.75-15,9.25-28,14.69-42" />
<path class="cls-5 balloon-line-left" d="M147.05,758.07c1.17-2.64,2.45-5.24,3.74-7.82" />
<line class="cls-5 balloon-line-left" x1="133.48" y1="759" x2="129.48" y2="497" />
<path class="cls-5 balloon-line-right" d="M173.2,629.42A493.21,493.21,0,0,0,175.48,560c-1-23-11-43-22.25-63" />
<path class="cls-5 balloon-line-right" d="M204.36,629.89C205.48,602,208.48,573,200.48,545c-4-13-11-24-17.13-35.74" />
<path class="cls-5 balloon-line-right" d="M230.39,629.21c2.61-26.3,3.12-52.77-7.58-77.44-2.79-6.43-5.94-12.69-8.8-19.08" />
<path class="cls-5 balloon-line-right" d="M246.8,628.1A125.86,125.86,0,0,0,243,583.87" />
<path class="cls-5 balloon-line-bg" d="M120.48,761l-1-10-2-8a364.6,364.6,0,0,1-19-57c-2.1-8.59-3-20-4.49-32-2.28-18.34-4.51-40-3.51-65,.72-18.08-.14-33.92,4-49,4.6-16.76,13-30.36,19-43" />
<path class="cls-5 balloon-line-bg" d="M111.48,763l-2-9-2.33-7a11.16,11.16,0,0,0-2-3.64C95.49,731.76,85,718.39,75.48,697c-4-9-10.51-23-12-35-2.28-18.33-7-32-6-57,.72-18.08-.14-33.92,4-49a139.35,139.35,0,0,1,22-45" />
<path class="cls-5 balloon-line-bg" d="M100.48,764l-2-9-2.33-7a11.16,11.16,0,0,0-2-3.64C84.49,732.76,72.48,725,59.48,705c-5.37-8.26-12-18.64-16-30-6-17-9-22-12-47a146.45,146.45,0,0,1,2-48c3.41-17,10-33,19-45" />
<path class="cls-5 balloon-line-bg" d="M82.48,746c-10.66-9.75-25-21-34-33-27-37-41-82-28.44-125.47" />
<path class="cls-5 balloon-line-bg" d="M173.2,629.42A493.21,493.21,0,0,0,175.48,560c-1-23-11-43-22.25-63" />
<path class="cls-5 balloon-line-bg" d="M138.23,761c-.75-15,9.25-28,14.69-42" />
<path class="cls-5 balloon-line-bg" d="M147.05,758.07c1.17-2.64,2.45-5.24,3.74-7.82" />
<line class="cls-5 balloon-line-bg" x1="133.48" y1="759" x2="129.48" y2="497" />
<path class="cls-5 balloon-line-bg" d="M204.36,629.89C205.48,602,208.48,573,200.48,545c-4-13-11-24-17.13-35.74" />
<path class="cls-5 balloon-line-bg" d="M230.39,629.21c2.61-26.3,3.12-52.77-7.58-77.44-2.79-6.43-5.94-12.69-8.8-19.08" />
<path class="cls-5 balloon-line-bg" d="M246.8,628.1A125.86,125.86,0,0,0,243,583.87" />
<path class="cls-5" d="M165.09,503.87c2.91.42,5.82.92,8.71,1.49" />
<path class="cls-5" d="M139.34,502.07q4.77,0,9.52.24" />
<path class="cls-5" d="M116.64,503.3c3.38-.37,6.76-.67,10.16-.87" />
<path class="cls-5" d="M92.13,507.47q4.26-1,8.56-1.78" />
<path class="cls-5" d="M124.48,554c-6,9-21.57,9.58-25.52,1.6" />
<path class="cls-5" d="M140.07,554.67c8.41,7.57,17.41,8.33,25.57.27" />
<path class="cls-5" d="M181.17,559.11a16.36,16.36,0,0,0,17,1.88" />
<path class="cls-5" d="M84.16,561.11a16.35,16.35,0,0,1-17,1.88" />
<path class="cls-5" d="M211,566.73a16.49,16.49,0,0,0,11.29,2.16" />
<path class="cls-5" d="M41,570.72a16.55,16.55,0,0,0,11.35-1.81" />
<path class="cls-5" d="M95.61,775.07a104.36,104.36,0,0,1,46.2-5.28" />
<path class="cls-3" d="M95.57,784.74a104.36,104.36,0,0,1,46.27-4.62" />
<path class="cls-5" d="M141.52,790.43c-14.72-1.36-32-1.43-46,3.57" />
<path class="cls-3" d="M127,806" />
<line class="cls-5" x1="88.48" y1="796" x2="88.48" y2="767" />
<path class="cls-3" d="M32.33,661.76c-.9.49-1.8,1-2.68,1.51" />
<path class="cls-3" d="M55.7,653.15c-3.25.94-6.48,2-9.67,3.1" />
<path class="cls-3" d="M84.44,646.6c-4.76.83-9.51,1.71-14.26,2.58" />
<path class="cls-3" d="M124.87,643.49A174.19,174.19,0,0,0,100,645.31" />
<path class="cls-3" d="M41.33,684.76c-.9.49-1.8,1-2.68,1.51" />
<path class="cls-3" d="M61.7,677.15c-3.25.94-6.48,2-9.67,3.1" />
<path class="cls-3" d="M89.44,671.6c-4.76.83-9.51,1.71-14.26,2.58" />
<path class="cls-3" d="M124,669.84a184.6,184.6,0,0,0-20.09,1" />
<path class="cls-3" d="M150.61,646a94.32,94.32,0,0,0-12.35-2.45" />
<path class="cls-3" d="M176.7,528.27c3.33.4,6.64.9,9.94,1.52" />
<path class="cls-3" d="M139.56,526c6.93.28,13.86.49,20.79.87" />
<path class="cls-3" d="M105.64,527.42c6.81-.46,13.63-.76,20.43-1.3" />
<path class="cls-3" d="M77.73,531.24a117.24,117.24,0,0,1,12.77-2.4" />
<path class="cls-3" d="M60.48,537c1.76-1.08-.31-.27,1.55-1.17" />
<path class="cls-3" d="M206,534c-1.77-1.08.31-.27-1.55-1.17" />
<line class="cls-3" x1="98.34" y1="801.1" x2="100.62" y2="813.9" />
<line class="cls-5" x1="142.48" y1="823" x2="97.48" y2="823" />
<line class="cls-5" x1="106.48" y1="856" x2="97.48" y2="824" />
<line class="cls-5" x1="142.48" y1="856" x2="106.48" y2="856" />
</g>
<g id="blue-building">
<line class="cls-6" x1="155.48" y1="637" x2="408.48" y2="635" />
<line class="cls-6" x1="157.48" y1="660" x2="406.48" y2="658" />
<line class="cls-6" x1="403.48" y1="641" x2="403.48" y2="651" />
<line class="cls-6" x1="158.48" y1="643" x2="158.48" y2="653" />
<line class="cls-6" x1="157.48" y1="691" x2="405.48" y2="689" />
<line class="cls-6" x1="160.48" y1="709" x2="160.48" y2="755" />
<line class="cls-3" x1="234.48" y1="709" x2="233.48" y2="754" />
<line class="cls-6" x1="331.48" y1="707" x2="331.48" y2="753" />
<line class="cls-6" x1="402.48" y1="708" x2="402.48" y2="754" />
<line class="cls-6" x1="406.48" y1="772" x2="406.48" y2="877" />
<line class="cls-6" x1="323.48" y1="771" x2="323.48" y2="877" />
<line class="cls-6" x1="237.48" y1="772" x2="237.48" y2="877" />
<line class="cls-6" x1="157.46" y1="772.04" x2="153.5" y2="876.96" />
<rect class="cls-7" x="168.48" y="721" width="57" height="29" />
<rect class="cls-7" x="339.48" y="719" width="55" height="30" />
<path class="cls-6" d="M241.48,751c2.85-20.32,18.67-36,41-36,22.52,0,38.39,16.42,41,37" />
<line class="cls-3" x1="146.48" y1="671" x2="408.48" y2="669" />
<line class="cls-3" x1="145.48" y1="682" x2="408.48" y2="679" />
<line class="cls-3" x1="156.48" y1="701" x2="405.48" y2="699" />
<line class="cls-3" x1="147.48" y1="765" x2="248.48" y2="764" />
<line class="cls-3" x1="310.48" y1="763" x2="410.48" y2="763" />
<line class="cls-3" x1="162.48" y1="858" x2="228.48" y2="858" />
<line class="cls-3" x1="331.48" y1="857" x2="398.48" y2="857" />
</g>
<g id="las-vegas">
<line class="cls-8" x1="10.98" y1="899.5" x2="10.98" y2="1003.5" />
<line class="cls-8" x1="62.98" y1="1003.5" x2="10.98" y2="1003.5" />
<line class="cls-8" x1="100.98" y1="952.5" x2="125.98" y2="899.5" />
<line class="cls-8" x1="168.98" y1="1002.5" x2="125.98" y2="899.5" />
<line class="cls-8" x1="138.98" y1="965.5" x2="97.98" y2="965.5" />
<line class="cls-8" x1="78.98" y1="1003.5" x2="97.98" y2="965.5" />
<path class="cls-8" d="M248,911.5c-4-6-9-9-15-11-9.7-3.23-21.23-3.31-28,1-5.94,3.78-12.63,12.44-11,21,1.27,6.65,7.11,10.9,10,13,4.9,3.56,9.07,4.49,14,6,13.66,4.17,22,9,28,17s8,17.36,3,27c-7.79,15.12-26.16,15.85-30,16-3,.12-17.88.71-27-10a26.7,26.7,0,0,1-5-9" />
<line class="cls-8" x1="665.98" y1="955.5" x2="640.98" y2="902.5" />
<line class="cls-8" x1="597.98" y1="1005.5" x2="640.98" y2="902.5" />
<line class="cls-8" x1="627.98" y1="968.5" x2="668.98" y2="968.5" />
<line class="cls-8" x1="687.98" y1="1006.5" x2="668.98" y2="968.5" />
<path class="cls-8" d="M763,914.5c-4-6-9-9-15-11-9.7-3.23-21.23-3.31-28,1-5.94,3.78-12.63,12.44-11,21,1.27,6.65,7.11,10.9,10,13,4.9,3.56,9.07,4.49,14,6,13.66,4.17,22,9,28,17s8,17.36,3,27c-7.79,15.12-26.16,15.85-30,16-3,.12-17.88.71-27-10a26.7,26.7,0,0,1-5-9" />
<line class="cls-8" x1="303.98" y1="897.5" x2="341.98" y2="1003.5" />
<line class="cls-8" x1="382.98" y1="898.5" x2="341.98" y2="1003.5" />
<line class="cls-8" x1="463.98" y1="900.5" x2="406.98" y2="899.5" />
<line class="cls-8" x1="404.98" y1="1004.5" x2="406.98" y2="899.5" />
<line class="cls-8" x1="459.98" y1="1005.5" x2="404.98" y2="1004.5" />
<line class="cls-8" x1="422.98" y1="951.5" x2="443.98" y2="951.5" />
<path class="cls-8" d="M575,923.5a52.53,52.53,0,0,0-94,19c-5.42,24.33,8,47.93,27,58,15,8,30.21,5.66,37,4,3.47-.85,23.14-5.67,33-24a45,45,0,0,0,5-16" />
<line class="cls-8" x1="550.98" y1="964.5" x2="582.98" y2="964.5" />
</g>
<g id="marathon">
<line class="cls-9" x1="121.98" y1="1060.5" x2="125.98" y2="1032.5" />
<line class="cls-9" x1="136.48" y1="1061" x2="126.48" y2="1033" />
<line class="cls-9" x1="147.48" y1="1033" x2="136.48" y2="1061" />
<line class="cls-9" x1="149.48" y1="1061" x2="147.48" y2="1033" />
<line class="cls-9" x1="156.48" y1="1061" x2="168.48" y2="1032" />
<line class="cls-9" x1="179.48" y1="1061" x2="168.48" y2="1032" />
<line class="cls-9" x1="163.48" y1="1050" x2="173.48" y2="1050" />
<line class="cls-9" x1="207.48" y1="1061" x2="219.48" y2="1032" />
<line class="cls-9" x1="230.48" y1="1061" x2="219.48" y2="1032" />
<line class="cls-9" x1="214.48" y1="1050" x2="224.48" y2="1050" />
<line class="cls-9" x1="186.48" y1="1061" x2="186.48" y2="1033" />
<path class="cls-9" d="M187.25,1032.83a10.13,10.13,0,0,1,4.23-.83c5.52,0,10,2.36,10,6.5s-4.48,7.5-10,7.5a5.67,5.67,0,0,1-4-1" />
<line class="cls-9" x1="201.48" y1="1061" x2="191.48" y2="1046" />
<line class="cls-9" x1="232.48" y1="1033" x2="249.48" y2="1033" />
<line class="cls-9" x1="240.48" y1="1062" x2="240.48" y2="1033" />
<line class="cls-9" x1="255.48" y1="1032" x2="255.48" y2="1062" />
<line class="cls-9" x1="272.48" y1="1032" x2="272.48" y2="1062" />
<line class="cls-10" x1="256.48" y1="1048" x2="270.48" y2="1048" />
<path class="cls-9" d="M307.48,1047.5c0,8-6.27,13.5-14,13.5s-14-5.49-14-13.5a14,14,0,1,1,28,0Z" />
<line class="cls-9" x1="313.48" y1="1062" x2="312.48" y2="1033" />
<line class="cls-9" x1="333.48" y1="1062" x2="332.48" y2="1032" />
<line class="cls-9" x1="312.48" y1="1032" x2="332.48" y2="1062" />
<line class="cls-9" x1="440.98" y1="1062.5" x2="444.98" y2="1034.5" />
<line class="cls-9" x1="455.48" y1="1063" x2="445.48" y2="1035" />
<line class="cls-9" x1="466.48" y1="1035" x2="455.48" y2="1063" />
<line class="cls-9" x1="469.48" y1="1064" x2="466.48" y2="1035" />
<line class="cls-9" x1="477.48" y1="1064" x2="488.48" y2="1036" />
<line class="cls-9" x1="499.48" y1="1065" x2="488.48" y2="1036" />
<line class="cls-9" x1="483.48" y1="1054" x2="493.48" y2="1054" />
<line class="cls-9" x1="528.48" y1="1066" x2="540.48" y2="1037" />
<line class="cls-9" x1="551.48" y1="1066" x2="540.48" y2="1037" />
<line class="cls-9" x1="535.48" y1="1055" x2="545.48" y2="1055" />
<line class="cls-9" x1="506.48" y1="1065" x2="506.48" y2="1037" />
<path class="cls-9" d="M507.25,1036.83a10.13,10.13,0,0,1,4.23-.83c5.52,0,10,2.36,10,6.5s-4.48,7.5-10,7.5a5.67,5.67,0,0,1-4-1" />
<line class="cls-9" x1="521.48" y1="1065" x2="511.48" y2="1050" />
<line class="cls-9" x1="554.48" y1="1037" x2="571.48" y2="1037" />
<line class="cls-9" x1="562.48" y1="1066" x2="562.48" y2="1037" />
<line class="cls-9" x1="577.48" y1="1037" x2="577.48" y2="1067" />
<line class="cls-9" x1="594.48" y1="1037" x2="594.48" y2="1067" />
<line class="cls-10" x1="578.48" y1="1053" x2="592.48" y2="1053" />
<path class="cls-9" d="M629.48,1052.5c0,8-6.27,13.5-14,13.5s-14-5.49-14-13.5a14,14,0,1,1,28,0Z" />
<line class="cls-9" x1="636.48" y1="1068" x2="635.48" y2="1039" />
<line class="cls-9" x1="656.48" y1="1068" x2="655.48" y2="1038" />
<line class="cls-9" x1="635.48" y1="1038" x2="655.48" y2="1068" />
<line class="cls-9" x1="381.48" y1="1038" x2="386.48" y2="1033" />
<line class="cls-9" x1="386.48" y1="1063" x2="386.48" y2="1033" />
<line class="cls-9" x1="391.48" y1="1063" x2="401.48" y2="1033" />
<line class="cls-9" x1="406.48" y1="1062" x2="423.48" y2="1062" />
<path class="cls-9" d="M408.48,1041c.21-4.75,4.14-7.18,8-7,4.35.21,8.08,5.2,7,9-2,7-10,12-17,19" />
<line class="cls-9" x1="366.48" y1="1063" x2="348.48" y2="1044" />
<line class="cls-9" x1="367.48" y1="1052" x2="358.48" y2="1062" />
<path class="cls-9" d="M360.58,1060a7.83,7.83,0,0,1-6.1,3,8.26,8.26,0,0,1-8-8.5,8.76,8.76,0,0,1,2.33-6" />
<circle class="cls-9" cx="353.98" cy="1040.5" r="6.5" />
</g>
<g id="diamond">
<line class="cls-11" x1="431.48" y1="815" x2="467.48" y2="811" />
<line class="cls-11" x1="485.48" y1="828" x2="467.48" y2="811" />
<line class="cls-11" x1="418.48" y1="835" x2="431.48" y2="815" />
<line class="cls-11" x1="455.48" y1="868" x2="485.48" y2="828" />
<line class="cls-11" x1="418.48" y1="835" x2="455.48" y2="868" />
<line class="cls-11" x1="429.48" y1="834" x2="474.48" y2="830" />
<line class="cls-11" x1="457.48" y1="825" x2="464.48" y2="818" />
<line class="cls-11" x1="446.48" y1="826" x2="436.48" y2="821" />
<line class="cls-11" x1="445.48" y1="840" x2="450.48" y2="853" />
<line class="cls-11" x1="458.48" y1="853" x2="460.48" y2="840" />
</g>
<g id="martini-glass">
<path class="cls-11" d="M24.48,795c-6.91,0-14-5.1-14-12s5.59-13,12.5-13,12.5,5.1,12.5,12" />
<line class="cls-11" x1="35.48" y1="782" x2="70.48" y2="798" />
<line class="cls-11" x1="39.48" y1="814" x2="70.48" y2="798" />
<line class="cls-11" x1="25.48" y1="795" x2="31.48" y2="810" />
<line class="cls-11" x1="16.48" y1="840" x2="31.48" y2="810" />
<line class="cls-11" x1="25.48" y1="844" x2="39.48" y2="814" />
<path class="cls-11" d="M25.48,844c9,5,13.41,9.35,12.36,11.73s-9.81,1.11-19.4-3.16S2,842.79,3.12,840.27c1-2.16,5.36-2.27,12.36.73" />
</g>
<g id="white-building">
<line class="cls-3" x1="214.48" y1="404" x2="214.48" y2="326" />
<line class="cls-3" x1="300.48" y1="325" x2="214.48" y2="326" />
<line class="cls-3" x1="302.48" y1="389" x2="300.48" y2="325" />
<line class="cls-3" x1="303.48" y1="628" x2="303.48" y2="586" />
</g>
<g id="music-note">
<path class="cls-12" d="M749.62,855.05c.91,6.57-4.84,12.79-12.85,13.9s-15.23-3.31-16.15-9.87" />
<line class="cls-12" x1="733.48" y1="808" x2="774.48" y2="792" />
<line class="cls-12" x1="787.48" y1="838" x2="774.98" y2="791.5" />
<line class="cls-12" x1="741.98" y1="846.5" x2="733.98" y2="808.5" />
<line class="cls-12" x1="742.98" y1="819.5" x2="773.48" y2="808" />
<line class="cls-12" x1="778.48" y1="831" x2="773.48" y2="808" />
<line class="cls-12" x1="749.98" y1="854.5" x2="742.98" y2="819.5" />
<path class="cls-12" d="M749.62,855.05c.91,6.57-4.84,12.79-12.85,13.9s-15.23-3.31-16.15-9.87,4.85-12.79,12.86-13.9a17.34,17.34,0,0,1,5.77.15" />
<path class="cls-12" d="M787.48,838c.91,6.56-3.7,15.84-11.71,17s-15.23-3.31-16.15-9.87,4.85-12.79,12.86-13.9a17.34,17.34,0,0,1,5.77.15" />
</g>
<g id="welcome-sign">
<g id="sign-outline">
<line class="cls-12" x1="257.98" y1="559.5" x2="335.98" y2="590.5" />
<line class="cls-12" x1="447.29" y1="546.52" x2="336.67" y2="590.48" />
<line class="cls-12" x1="302.48" y1="402" x2="335.48" y2="387" />
<line class="cls-12" x1="372.48" y1="402" x2="335.48" y2="387" />
<path class="cls-12" d="M143.57,473.52c7-8.06,17.35-12.42,27.22-15.87" />
<path class="cls-12" d="M509.4,457.76c13.06,5.35,28.81,14.94,29.07,30.85" />
</g>
<g id="sign-w" class="sign-letter">
<ellipse class="cls-12" cx="189.98" cy="431.5" rx="24.5" ry="23.5" />
<line class="cls-13" x1="177.98" y1="423.5" x2="185.48" y2="443" />
<line class="cls-13" x1="189.98" y1="422.5" x2="185.98" y2="442.5" />
<line class="cls-13" x1="194.98" y1="442.5" x2="189.98" y2="422.5" />
<line class="cls-13" x1="201.98" y1="422.5" x2="194.98" y2="442.5" />
</g>
<g id="sign-e-1" class="sign-letter">
<ellipse class="cls-12" cx="238.98" cy="431.5" rx="24.5" ry="23.5" />
<line class="cls-13" x1="243.98" y1="422.5" x2="233.98" y2="422.5" />
<line class="cls-13" x1="233.98" y1="441.5" x2="233.98" y2="423.5" />
<line class="cls-13" x1="243.98" y1="441.5" x2="234.98" y2="441.5" />
<line class="cls-14" x1="241.98" y1="431.5" x2="234.98" y2="431.5" />
</g>
<g id="sign-l" class="sign-letter">
<ellipse class="cls-12" cx="287.98" cy="431.5" rx="24.5" ry="23.5" />
<line class="cls-13" x1="283.48" y1="422" x2="283.48" y2="441" />
<line class="cls-13" x1="294.48" y1="442" x2="283.48" y2="442" />
</g>
<g id="sign-c" class="sign-letter">
<ellipse class="cls-12" cx="336.98" cy="431.5" rx="24.5" ry="23.5" />
<path class="cls-15" d="M344.48,440a10.43,10.43,0,0,1-12.26,0,10,10,0,0,1-1.62-14c3.43-4.32,10.55-4.34,14.88-.91" />
</g>
<g id="sign-o" class="sign-letter">
<ellipse class="cls-12" cx="385.48" cy="431.5" rx="24" ry="23.5" />
<circle class="cls-16" cx="385.48" cy="432" r="10" />
</g>
<g id="sign-m" class="sign-letter">
<circle class="cls-12" cx="433.48" cy="431" r="24" />
<line class="cls-13" x1="423.98" y1="441.5" x2="426.98" y2="421.5" />
<line class="cls-13" x1="433.98" y1="441" x2="427.98" y2="421.5" />
<line class="cls-13" x1="440.98" y1="421.5" x2="433.98" y2="441.5" />
<line class="cls-13" x1="443.98" y1="441.5" x2="441.98" y2="421.5" />
</g>
<g id="sign-e-2" class="sign-letter">
<circle class="cls-12" cx="482.48" cy="431" r="24" />
<line class="cls-13" x1="487.98" y1="421.5" x2="477.98" y2="421.5" />
<line class="cls-13" x1="477.98" y1="440.5" x2="477.98" y2="422.5" />
<line class="cls-13" x1="487.98" y1="440.5" x2="478.98" y2="440.5" />
<line class="cls-14" x1="485.98" y1="430.5" x2="478.98" y2="430.5" />
</g>
<g id="welcome-date">
<line class="cls-3" x1="235.48" y1="491" x2="242.48" y2="486" />
<line class="cls-3" x1="242.48" y1="519" x2="242.48" y2="486" />
<path class="cls-3" d="M294.48,509c0,.75-.19,5.28,3,8,4.33,3.7,12.41,2,15-3a9.61,9.61,0,0,0,0-9c-1.56-3.12-7.83-3.58-8-4" />
<line class="cls-3" x1="251.48" y1="491" x2="258.48" y2="486" />
<line class="cls-3" x1=.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0