多彩机械时钟变换走动效果
代码语言：html
所属分类：其他
代码描述：多彩机械时钟变换走动效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*[this is where magic is brewed]*/
@-webkit-keyframes circle {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes circle {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes swing {
0% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
100% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
}
@keyframes swing {
0% {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
100% {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
}
@-webkit-keyframes anchorswing {
0% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
}
@keyframes anchorswing {
0% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
}
@-webkit-keyframes pulse {
0% {
opacity: 1;
}
10% {
opacity: .5;
}
50% {
opacity: .25;
}
90% {
opacity: .5;
}
100% {
opacity: 1;
}
}
@keyframes pulse {
0% {
opacity: 1;
}
10% {
opacity: .5;
}
50% {
opacity: .25;
}
90% {
opacity: .5;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes glow {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes glow {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes breathe {
0% {
opacity: .25;
}
50% {
opacity: 1;
}
100% {
opacity: .25;
}
}
@keyframes breathe {
0% {
opacity: .25;
}
50% {
opacity: 1;
}
100% {
opacity: .25;
}
}
@-webkit-keyframes hue {
0% {
fill: #ff8000;
}
55% {
fill: #ff8000;
}
70% {
fill: #00ff80;
}
85% {
fill: #8000ff;
}
99.99% {
fill: #ff8000;
}
}
@keyframes hue {
0% {
fill: #ff8000;
}
55% {
fill: #ff8000;
}
70% {
fill: #00ff80;
}
85% {
fill: #8000ff;
}
99.99% {
fill: #ff8000;
}
}
@-webkit-keyframes stroke-hue {
0% {
stroke: #ff8000;
}
55% {
stroke: #ff8000;
}
70% {
stroke: #00ff80;
}
85% {
stroke: #8000ff;
}
99.99% {
stroke: #ff8000;
}
}
@keyframes stroke-hue {
0% {
stroke: #ff8000;
}
55% {
stroke: #ff8000;
}
70% {
stroke: #00ff80;
}
85% {
stroke: #8000ff;
}
99.99% {
stroke: #ff8000;
}
}
@-webkit-keyframes dust {
0% {
opacity: 0;
-webkit-transform: scale(0.5) rotateZ(-15deg);
transform: scale(0.5) rotateZ(-15deg);
}
50% {
opacity: .75;
-webkit-transform: scale(0.75) rotateZ(0deg);
transform: scale(0.75) rotateZ(0deg);
}
100% {
opacity: 0;
-webkit-transform: scale(1) rotateZ(15deg);
transform: scale(1) rotateZ(15deg);
}
}
@keyframes dust {
0% {
opacity: 0;
-webkit-transform: scale(0.5) rotateZ(-15deg);
transform: scale(0.5) rotateZ(-15deg);
}
50% {
opacity: .75;
-webkit-transform: scale(0.75) rotateZ(0deg);
transform: scale(0.75) rotateZ(0deg);
}
100% {
opacity: 0;
-webkit-transform: scale(1) rotateZ(15deg);
transform: scale(1) rotateZ(15deg);
}
}
html body {
position: relative;
overflow: hidden;
height: 100vh;
background: #0d0d0d;
}
html body .frame {
position: absolute;
height: 95vmin;
width: 95vmin;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
html body .frame svg {
position: absolute;
height: 125%;
width: 125%;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
/*[animations]*/
}
html body .frame svg .primary-fill {
fill: #ff8000;
}
html body .frame svg .primary-stroke-a {
fill: none;
stroke: #ff8000;
stroke-width: 1;
}
html body .frame svg .primary-stroke-b {
fill: none;
stroke: #ff8000;
stroke-width: 3;
}
html body .frame svg .hour-hand {
fill: #38332e;
}
html body .frame svg .minute-hand {
fill: #464039;
}
html body .frame svg .second-hand {
fill: #544d45;
}
html body .frame svg .skeleton-frame {
fill: url(#face_frame_skeleton_1_);
}
html body .frame svg .gear-front {
fill: #2a2622;
}
html body .frame svg .gear-back {
fill: #1c1a17;
}
html body .frame svg .backdrop-disk {
fill: #110f0e;
}
html body .frame svg .backdrop-glow-gradient {
fill: url(#backdrop_glow_gradient);
}
html body .frame svg .st11 {
fill: none;
}
html body .frame svg .st1 {
fill: none;
stroke: #1A1A1A;
stroke-width: 6;
stroke-linecap: round;
}
html body .frame svg .st2 {
fill: none;
stroke: #1A1A1A;
stroke-width: 4.75;
stroke-linecap: round;
}
html body .frame svg .st3 {
fill: none;
stroke: #1A1A1A;
stroke-width: 3.5;
stroke-linecap: round;
}
html body .frame svg .st4 {
fill: none;
stroke: #1A1A1A;
stroke-width: 2.25;
stroke-linecap: round;
}
html body .frame svg .st5 {
fill: none;
stroke: #1A1A1A;
stroke-linecap: round;
}
html body .frame svg .st6 {
fill: url(#SVGID_1_);
}
html body .frame svg .st8 {
fill: url(#SVGID_2_);
}
html body .frame svg .st9 {
fill: #181818;
}
html body .frame svg .st10 {
fill: url(#SVGID_3_);
}
html body .frame svg .st14 {
fill: url(#SVGID_4_);
}
html body .frame svg .st15 {
fill: url(#SVGID_5_);
stroke: url(#SVGID_6_);
stroke-width: 2;
}
html body .frame svg .st16 {
fill: #0D0D0D;
stroke: url(#SVGID_7_);
}
html body .frame svg .st17 {
fill: #282828;
stroke: url(#SVGID_8_);
stroke-width: 2;
}
html body .frame svg .st18 {
fill: #282828;
stroke: url(#SVGID_9_);
stroke-width: 2;
}
html body .frame svg .st19 {
fill: #282828;
stroke: url(#SVGID_10_);
stroke-width: 2;
}
html body .frame svg .st20 {
fill: #282828;
stroke: url(#SVGID_11_);
stroke-width: 2;
}
html body .frame svg .st21 {
fill: #282828;
stroke: url(#SVGID_12_);
stroke-width: 2;
}
html body .frame svg .st22 {
fill: #282828;
stroke: url(#SVGID_13_);
stroke-width: 2;
}
html body .frame svg .st23 {
fill: #282828;
stroke: url(#SVGID_14_);
stroke-width: 2;
}
html body .frame svg .st24 {
fill: #282828;
stroke: url(#SVGID_15_);
stroke-width: 2;
}
html body .frame svg .st25 {
fill: #282828;
stroke: url(#SVGID_16_);
stroke-width: 2;
}
html body .frame svg .st26 {
fill: #282828;
stroke: url(#SVGID_17_);
stroke-width: 2;
}
html body .frame svg .st27 {
fill: #282828;
stroke: url(#SVGID_18_);
stroke-width: 2;
}
html body .frame svg .st28 {
fill: #282828;
stroke: url(#SVGID_19_);
stroke-width: 2;
}
html body .frame svg .st29 {
fill: url(#SVGID_20_);
stroke: url(#SVGID_21_);
stroke-width: 2;
}
html body .frame svg .st30 {
fill: #0D0D0D;
stroke: url(#SVGID_22_);
}
html body .frame svg .st31 {
fill: url(#SVGID_23_);
stroke: url(#SVGID_24_);
stroke-width: 2;
}
html body .frame svg .st32 {
fill: #0D0D0D;
stroke: url(#SVGID_25_);
}
html body .frame svg .st34 {
fill: url(#SVGID_26_);
stroke: url(#SVGID_27_);
stroke-width: 2;
}
html body .frame svg .st35 {
fill: #0D0D0D;
stroke: url(#SVGID_28_);
}
html body .frame svg .st36 {
fill: url(#SVGID_29_);
stroke: url(#SVGID_30_);
stroke-width: 2;
}
html body .frame svg .st37 {
fill: #0D0D0D;
stroke: url(#SVGID_31_);
}
html body .frame svg .st38 {
fill: url(#SVGID_32_);
stroke: url(#SVGID_33_);
stroke-width: 2;
}
html body .frame svg .st39 {
fill: #0D0D0D;
stroke: url(#SVGID_34_);
}
html body .frame svg .st40 {
fill: url(#SVGID_35_);
stroke: url(#SVGID_36_);
stroke-width: 2;
}
html body .frame svg .st41 {
fill: #0D0D0D;
stroke: url(#SVGID_37_);
}
html body .frame svg .st42 {
fill: url(#SVGID_38_);
}
html body .frame svg .st45 {
fill: url(#SVGID_39_);
}
html body .frame svg .st46 {
fill: url(#SVGID_40_);
}
html body .frame svg .st47 {
fill: url(#SVGID_41_);
}
html body .frame svg .st48 {
fill: url(#SVGID_42_);
}
html body .frame svg .st49 {
fill: url(#SVGID_43_);
}
html body .frame svg .st50 {
fill: url(#SVGID_44_);
}
html body .frame svg .st51 {
fill: url(#SVGID_45_);
}
html body .frame svg .st52 {
fill: url(#SVGID_46_);
}
html body .frame svg .st53 {
fill: url(#SVGID_47_);
}
html body .frame svg .st54 {
fill: url(#SVGID_48_);
}
html body .frame svg .st55 {
fill: url(#SVGID_49_);
}
html body .frame svg .st60 {
fill: url(#SVGID_50_);
stroke: url(#SVGID_51_);
stroke-width: 2;
}
html body .frame svg .st61 {
fill: #0D0D0D;
stroke: url(#SVGID_52_);
}
html body .frame svg #hands,
html body .frame svg #hands g {
-webkit-transform-origin: 657.5px 657.5px;
transform-origin: 657.5px 657.5px;
}
html body .frame svg #knobs {
-webkit-animation: breathe 5s linear infinite;
animation: breathe 5s linear infinite;
}
html body .frame svg #knobs [class^=primary-stroke] {
-webkit-animation: stroke-hue 15s linear infinite;
animation: stroke-hue 15s linear infinite;
}
html body .frame svg #face_marks g {
-webkit-animation: breathe 5s linear infinite;
animation: breathe 5s linear infinite;
}
html body .frame svg #face_marks .primary-fill {
-webkit-animation: hue 15s linear infinite;
animation: hue 15s linear infinite;
}
html body .frame svg #back_marks {
-webkit-animation: breathe 10s linear infinite;
animation: breathe 10s linear infinite;
}
html body .frame svg #second_hand {
-webkit-animation: circle 60s steps(360) infinite;
animation: circle 60s steps(360) infinite;
}
html body .frame svg #minute_hand {
-webkit-animation: circle 3600s steps(360) infinite;
animation: circle 3600s steps(360) infinite;
}
html body .frame svg #hour_hand {
-webkit-animation: circle 216000s steps(360) infinite;
animation: circle 216000s steps(360) infinite;
}
html body .frame svg #pendilum {
-webkit-transform-origin: 657.5px 275px;
transform-origin: 657.5px 275px;
-webkit-animation: swing 1s cubic-bezier(0.75, 0, 0.25, 1) alternate infinite;
animation: swing 1s cubic-bezier(0.75, 0, 0.25, 1) alternate infinite;
}
html body .frame svg #gear_anchor {
-webkit-transform-origin: 657.5px 275px;
transform-origin: 657.5px 275px;
-webkit-animation: anchorswing 1s cubic-bezier(0.75, 0, 0.25, 1) alternate infinite;
animation: anchorswing 1s cubic-bezier(0.75, 0, 0.25, 1) alternate infinite;
}
html body .frame svg #gear_click {
-webkit-transform-origin: 657.5px 657.5px;
transform-origin: 657.5px 657.5px;
animation: circle 30s steps(30) reverse infinite;
}
html body .frame svg #backdrop_disk {
-webkit-transform-origin: 657.5px 657.5px;
transform-origin: 657.5px 657.5px;
-webkit-animation: circle 300s linear infinite;
animation: circle 300s linear infinite;
}
html body .frame svg #ticks {
-webkit-animation: pulse 1s linear infinite;
animation: pulse 1s linear infinite;
}
html body .frame svg #ticks [id^=minute] {
-webkit-animation: hue 15s linear infinite;
animation: hue 15s linear infinite;
}
html body .frame svg #gear_front_ten_mark {
-webkit-transform-origin: 292px 447px;
transform-origin: 292px 447px;
-webkit-animation: circle 10s steps(90) infinite;
animation: circle 10s steps(90) infinite;
}
html body .frame svg #gear_front_two {
-webkit-transform-origin: 657.5px 657.5px;
transform-origin: 657.5px 657.5px;
-webkit-animation: circle 60s linear infinite;
animation: circle 60s linear infinite;
}
html body .frame svg #gear_front_small,
html body .frame svg #gear_six {
-webkit-transform-origin: 768px 732px;
transform-origin: 768px 732px;
animation: circle 36s linear reverse infinite;
}
html body .frame svg #gear_one {
-webkit-transform-origin: 657.5px 657.5px;
transform-origin: 657.5px 657.5px;
-webkit-animation: circle 30s linear infinite;
animation: circle 30s linear infinite;
}
html body .frame svg #gear_two {
-webkit-transform-origin: 532.7px 585.5px;
transform-origin: 532.7px 585.5px;
-webkit-animation: circle 5s steps(90) infinite;
animation: circle 5s steps(90) infinite;
}
html body .frame svg #gear_three {
-webkit-transform-origin: 954.8px 955.5px;
transform-origin: 954.8px 955.5px;
-webkit-animation: circle 7.5s linear infinite;
animation: circle 7.5s linear infinite;
}
html body .frame svg #gear_four {
-webkit-transform-origin: 986px 629px;
transform-origin: 986px 629px;
-webkit-animation: circle 7.5s linear infinite;
animation: circle 7.5s linear infinite;
}
html body .frame svg #gear_five {
-webkit-transform-origin: 359px 955px;
transform-origin: 359px 955px;
-webkit-animation: circle 15s linear infinite;
animation: circle 15s linear infinite;
}
html body .frame svg #gear_seven {
-webkit-transform-origin: 359px 358px;
transform-origin: 359px 358px;
animation: circle 7.5s steps(90) reverse infinite;
}
html body .frame svg #gear_eight {
-webkit-transform-origin: 533px 585.5px;
transform-origin: 533px 585.5px;
-webkit-animation: circle 15s steps(90) infinite;
animation: circle 15s steps(90) infinite;
}
html body .frame svg #gear_nine {
-webkit-transform-origin: 874px 444.5px;
transform-origin: 874px 444.5px;
-webkit-animation: circle 10s steps(90) infinite;
animation: circle 10s steps(90) infinite;
}
html body .frame svg #gear_ten {
-webkit-transform-origin: 328px 616.5px;
transform-origin: 328px 616.5px;
-webkit-animation: circle 10s steps(90) infinite;
animation: circle 10s steps(90) infinite;
}
html body .frame svg #gear_eleven {
-webkit-transform-origin: 533px 585.5px;
transform-origin: 533px 585.5px;
animation: circle 10s steps(90) reverse infinite;
}
html body .frame svg #backdrop_glow {
-webkit-animation: glow 15s linear infinite;
animation: glow 15s linear infinite;
}
html body .frame svg [id$=nib] {
-webkit-animation: hue 15s linear infinite;
animation: hue 15s linear infinite;
}
html body .dust {
z-index: 1;
position: absolute;
width: 120vmin;
height: 120vmin;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
html body .dust .specs {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(2px 2px at 10% 10%, #ff8000, rgba(255, 128, 0, 0)), radial-gradient(2px 2px at 20% 30%, #0080ff, rgba(0, 128, 255, 0)), radial-gradient(2px 2px at 40% 70%, #ff8000, rgba(255, 128, 0, 0)), radial-gradient(2px 2px at 50% 60%, #0080ff, rgba(0, 128, 255, 0)), radial-gradient(2px 2px at 80% 40%, #ff8000, rgba(255, 128, 0, 0)), radial-gradient(2px 2px at 90% 60%, #0080ff, rgba(0, 128, 255, 0)), radial-gradient(2px 2px at 75% 80%, #ff8000, rgba(255, 128, 0, 0)), radial-gradient(2px 2px at 90% 80%, #0080ff, rgba(0, 128, 255, 0));
background-repeat: repeat;
background-size: 100px 100px;
opacity: 0;
-webkit-animation: dust 3s linear infinite;
animation: dust 3s linear infinite;
}
html body .dust .specs:nth-child(1) {
background-position: 50% 50%;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
html body .dust .specs:nth-child(2) {
background-position: 20% 60%;
-webkit-animation-delay: 1s;
animation-delay: 1s;
animation-direction: reverse;
}
html body .dust .specs:nth-child(3) {
background-position: -20% -30%;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
html body .dust .specs:nth-child(4) {
background-position: 40% -80%;
-webkit-animation-delay: 3s;
animation-delay: 3s;
animation-direction: reverse;
}
html body .dust .specs:nth-child(5) {
background-position: -20% 30%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
</style>
</head>
<body translate="no">
<div class="frame">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1315 1315">
<defs>
</defs>
<g id="backdrop">
<g id="backdrop_disk">
<circle cx="657.5" cy="657.5" r="657.5" class="backdrop-disk" />
<g id="back_marks">
<g id="XMLID_5_">
<path d="M694.8 23.3L592.7 125.4M643.7 101.2L601 143.9M713.3 31.7l-42.7 42.6M721.7 50.2L619.6 152.3M721.7 125.4L619.6 23.3M643.7 74.4L601 31.7M713.3 143.9l-42.7-42.7M694.8 152.3L592.7 50.2" class="st1" />
<g transform="matrix(0.7071 -0.7071 0.7071 0.7071 130.4026 490.4157)">
<ellipse cx="657.2" cy="87.8" class="st1" rx="70.2" ry="70.2" />
<ellipse cx="657.2" cy="87.8" class="st2" rx="60.8" ry="60.8" />
<ellipse cx="657.2" cy="87.8" class="st3" rx="51.3" ry="51.3" />
<ellipse cx="657.2" cy="87.8" class="st4" rx="41.9" ry="41.9" />
<ellipse cx="657.2" cy="87.8" class="st5" rx="32.5" ry="32.5" />
</g>
</g>
<g id="XMLID_6_">
<path d="M694.8 1162.7l-102.1 102.1M643.7 1240.7l-42.7 42.6M713.3 1171.1l-42.7 42.7M721.7 1189.6l-102.1 102.1M721.7 1264.8l-102.1-102.1M643.7 1213.8l-42.7-42.7M713.3 1283.3l-42.7-42.7M694.8 1291.7l-102.1-102.1" class="st1" />
<g transform="matrix(0.7071 -0.7071 0.7071 0.7071 -675.2776 824.1394)">
<ellipse cx="657.2" cy="1227.2" class="st1" rx="70.2" ry="70.2" />
<ellipse cx="657.2" cy="1227.2" class="st2" rx="60.8" ry="60.8" />
<ellipse cx="657.2" cy="1227.2" class="st3" rx="51.3" ry="51.3" />
<ellipse cx="657.2" cy="1227.2" class="st4" rx="41.9" ry="41.9" />
<ellipse cx="657.2" cy="1227.2" class="st5" rx="32.5" ry="32.5" />
</g>
</g>
<g id="XMLID_8_">
<path d="M372.6 89.5l-37.3 139.4M367.4 182.5l-15.6 58.3M392.9 87.4l-15.6 58.4M409.4 99.3L372 238.8M447 164.4l-139.5-37.3M354 159.2l-58.4-15.6M449 184.7L390.7 169M437.1 201.2l-139.4-37.4" class="st1" />
<g transform="matrix(0.2588 -0.9659 0.9659 0.2588 117.436 481.2928)">
<ellipse cx="372.3" cy="164.1" class="st1" rx="70.2" ry="70.2" />
<ellipse cx="372.3" cy="164.1" class="st2" rx="60.8" ry="60.8" />
<ellipse cx="372.3" cy="164.1" class="st3" rx="51.3" ry="51.3" />
<ellipse cx="372.3" cy="164.1" class="st4" rx="41.9" ry="41.9" />
<ellipse cx="372.3" cy="164.1" class="st5" rx="32.5" ry="32.5" />
</g>
</g>
<g id="XMLID_7_">
<path d="M942.3 1076.2L905 1215.7M937.1 1169.2l-15.6 58.4M962.6 1074.2l-15.6 58.3M979.1 1086.1l-37.4 139.4M1016.7 1151.2l-139.5-37.4M923.7 1146l-58.4-15.7M1018.7 1171.4l-58.3-15.6M1006.8 1187.9l-139.4-37.3" class="st1" />
<g transform="matrix(0.2588 -0.9659 0.9659 0.2588 -413.4417 1762.9449)">
<ellipse cx="942" cy="1150.9" class="st1" rx="70.2" ry="70.2" />
<ellipse cx="942" cy="1150.9" class="st2" rx="60.8" ry="60.8" />
<ellipse cx="942" cy="1150.9" class="st3" rx="51.3" ry="51.3" />
<ellipse cx="942" cy="1150.9" class="st4" rx="41.9" ry="41.9" />
<ellipse cx="942" cy="1150.9" class="st5" rx="32.5" ry="32.5" />
</g>
</g>
<g id="XMLID_10_">
<path d="M126.8 307.8l37.3 139.5M168.7 391l15.7 58.3M143.3 296l15.6 58.3M163.5 298l37.4 139.5M228.6 335.6L89.2 373M145.4 377.6l-58.3 15.6M240.5 352.1l-58.3 15.6M238.5 372.3L99 409.7" class="st1" />
<g transform="matrix(0.9659 -0.2588 0.2588 0.9659 -90.867 55.0946)">
<ellipse cx="163.8" cy="372.6" class="st1" rx="70.2" ry="70.2" />
<ellipse cx="163.8" cy="372.6" class="st2" rx="60.8" ry="60.8" />
<ellipse cx="163.8" cy="372.6" class="st3" rx="51.3" ry="51.3" />
<ellipse cx="163.8" cy="372.6" class="st4" rx="41.9" ry="41.9" />
<ellipse cx="163.8" cy="372.6" class="st5" rx="32.5" ry="32.5" />
</g>
</g>
<g id="XMLID_9_">
<path d="M1113.5 877.5l37.4 139.5M1155.5 960.7l15.6 58.3M1130 865.7l15.6 58.3M1150.2 867.7l37.4 139.5M1215.4 905.3l-139.5 37.4M1132.2 947.3l-58.3 15.6M1227.3 921.8l-58.4 15.6M1225.2 942l-139.4 37.4" class="st1" />
<g transform="matrix(0.9659 -0.2588 0.2588 0.9659 -204.6939 329.8972)">
<ellipse cx="1150.6" cy="942.4" class="st1" rx="70.2" ry="70.2" />
<ellipse cx="1150.6" cy="942.4" class="st2" rx="60.8" ry="60.8" />
<ellipse cx="1150.6" cy="942.4" class="st3" rx="51.3" ry="51.3" />
<ellipse cx="1150.6" cy="942.4" class="st4" rx="41.9" ry="41.9" />
<ellipse cx="1150.6" cy="942.4" class="st5" rx="32.5" ry="32.5" />
</g>
</g>
<g id="XMLID_12_">
<path d="M23 619.9L125.1 722M100.9 670.9l42.7 42.7M31.3 601.4L74 644.1M49.9 593L152 695.1M125.1 593L23 695.1M74 670.9l-42.7 42.7M143.6 601.4l-42.7 42.7M152 619.9L49.9 722" class="st1" />
<g transform="matrix(0.7071 -0.7071 0.7071 0.7071 -439.2994 254.4375)">
<ellipse cx="87.5" cy="657.5" class="st1" rx="70.2" ry="70.2" />
<ellipse cx="87.5" cy="657.5" class="st2" rx="60.8" ry="60.8" />
<ellipse cx="87.5" cy="657.5" class="st3" rx="51.3" ry="51.3" />
<ellipse cx="87.5" cy="657.5" class="st4" rx="41.9" ry="41.9" />
<ellipse cx="87.5" cy="657.5" class="st5" rx="32.5" ry="32.5" />
</g>
</g>
<g id="XMLID_11_">
<path d="M1162.4 619.9L1264.5 722M1240.3 670.9l42.7 42.7M1170.7 601.4l42.7 42.7M1189.3 593l102.1 102.1M1264.5 593l-102.1 102.1M1213.4 670.9l-42.7 42.7M1283 601.4l-42.7 42.7M1291.4 619.9L1189.3 722" class="st1" />
<g transform="matrix(0.7071 -0.7071 0.7071 0.7071 -105.5757 1060.1177)">
<ellipse cx="1226.9" cy="657.5" class="st1" rx="70.2" ry="70.2" />
<ellipse cx="1226.9" cy="657.5" class="st2" rx="60.8" ry="60.8" />
<ellipse cx="1226.9" cy="657.5" class="st3" rx="51.3" ry="51.3" />
<ellipse cx="1226.9" cy="657.5" class="st4" rx="41.9" ry="41.9" />
<ellipse cx="1226.9" cy="657.5" class="st5" rx="32.5" ry="32.5" />
</g>
</g>
<g id="XMLID_14_">
<path d="M89.2 942l139.4 37.4M182.2 947.3l58.3 15.6M87.1 921.8l58.3 15.6M99 905.3l139.5 37.4M164.1 867.7l-37.3 139.5M158.9 960.7l-15.6 58.3M184.4 865.7L168.7 924M200.9 877.5L163.5 1017" class="st1" />
<g transform="matr.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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