css+svg实现魔方盒子方块运动动画效果代码
代码语言:html
所属分类:动画
代码描述:css+svg实现魔方盒子方块运动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
:root {
--ease: cubic-bezier(0.17, 0.67, 0.54, 1);
--color-bg: rgb(14, 39, 60);
--offset: 8px;
--min-offset: calc(var(--offset) * -1);
--close-scale: 0.7;
--open-scale: 0.9;
}
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100vh;
background-color: var(--color-bg);
display: flex;
justify-content: center;
flex-direction: column;
}
svg {
width: 90vw;
max-width: 620px;
margin: 0 auto;
overflow: visible;
}
rect,
g {
transform-box: fill-box;
transform-origin: center;
}
.face {
stroke: none;
fill: var(--color-bg);
transform-box: fill-box;
transform-origin: center;
}
#shadow {
transform: translateY(20px);
fill: rgba(0, 0, 0, 0.1);
filter: blur(8px);
}
.cell {
transform-box: fill-box;
transform-origin: center;
transition: all 80ms var(--ease) 180ms;
transform: scale(var(--close-scale));
stroke: var(--color-inactive);
stroke-width: 4px;
fill: none;
opacity: 1;
}
#face-0,
#face-1,
#face-2 {
display: none;
}
#face-3 {
--color-active: rgba(208, 57, 112, 1);
--color-inactive: rgba(23, 65, 99, 0.2);
}
#face-4 {
--color-active: rgba(182, 43, 94, 1);
--color-inactive: rgba(19, 54, 83, 0.2);
}
#face-5 {
--color-active: rgba(212, 73, 124, 1);
--color-inactive: rgba(31, 87, 132, 0.2);
}
.cell[data-alive="1"] {
stroke: var(--color-active);
}
#face-3 .cell[data-alive="1"] {
transform: scale(var(--open-scale)) translate(0px, var(--min-offset));
}
#face-4 .cell[data-alive="1"] {
transform: scale(var(--open-scale)) translate(var(--offset), var(--offset));
}
#face-5 .cell[data-alive="1"] {
transform: scale(var(--open-scale))
translate(var(--min-offset), var(--offset));
}
button.reset {
position: fixed;
right: 24px;
bottom: 24px;
cursor: pointer;
-webkit-appearance: none;
transition: all 0.3s ease;
border: none;
background: rgba(211, 188, 204, 0.08);
color: hsl(100, 0%, 78%);
width: auto;
margin: 48px auto 0;
padding: 8px 16px;
font-size: 1rem;
font-family: "Helvetica Neue", "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
outline: none;
}
button.reset:disabled {
opacity: 0.5;
}
button.reset:hover:not(:disabled) {
background: rgba(211, 188, 204, 0.2);
}
button.reset:active:not(:disabled) {
background: rgba(211, 188, 204, 0.3);
}
</style>
</head>
<body>
<!---->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<polygon id="shadow" points="0,320,200,260,400,320,200,380"></polygon>
<g id="face-0">
<polygon class="face" points="200,20 0,80 0,320 200,260"></polygon>
<polygon class="cell" points="200,20 190,23 190,35 200,32"></polygon>
<polygon class="cell" points="190,23 180,26 180,38 190,35"></polygon>
<polygon class="cell" points="180,26 170,29 170,41 180,38"></polygon>
<polygon class="cell" points="170,29 160,32 160,44 170,41"></polygon>
<polygon class="cell" points="160,32 150,35 150,47 160,44"></polygon>
<polygon class="cell" points="150,35 140,38 140,50 150,47"></polygon>
<polygon class="cell" points="140,38 130,41 130,53 140,50"></polygon>
<polygon class="cell" points="130,41 120,44 120,56 130,53"></polygon>
<polygon class="cell" points="120,44 110.00000000000001,47 110.00000000000001,59 120,56"></polygon>
<polygon class="cell" points="110.00000000000001,47 100,50 100,62 110.00000000000001,59"></polygon>
<polygon class="cell" points="100,50 89.99999999999999,53 89.99999999999999,65 100,62"></polygon>
<polygon class="cell" points="89.99999999999999,53 80,56 80,68 89.99999999999999,65"></polygon>
<polygon class="cell" points="80,56 70,59 70,71 80,68"></polygon>
<polygon class="cell" points="70,59 60.00000000000001,62 60.00000000000001,74 70,71"></polygon>
<polygon class="cell" points="60.00000000000001,62 50,65 50,77 60.00000000000001,74"></polygon>
<polygon class="cell" points="50,65 39.99999999999999,68 39.99999999999999,80 50,77"></polygon>
<polygon class="cell" points="39.99999999999999,68 30.000000000000004,71 30.000000000000004,83 39.99999999999999,80"></polygon>
<polygon class="cell" points="30.000000000000004,71 19.999999999999996,74 19.999999999999996,86 30.000000000000004,83"></polygon>
<polygon class="cell" points="19.999999999999996,74 10.000000000000009,77 10.000000000000009,89 19.999999999999996,86"></polygon>
<polygon class="cell" points="10.000000000000009,77 0,80 0,92 10.000000000000009,89"></polygon>
<polygon class="cell" points="200,32 190,35 190,47 200,44"></polygon>
<polygon class="cell" points="190,35 180,38 180,50 190,47"></polygon>
<polygon class="cell" points="180,38 170,41 170,53 180,50"></polygon>
<polygon class="cell" points="170,41 160,44 160,56 170,53"></polygon>
<polygon class="cell" points="160,44 150,47 150,59 160,56"></polygon>
<polygon class="cell" points="150,47 140,50 140,62 150,59"></polygon>
<polygon class="cell" points="140,50 130,53 130,65 140,62"></polygon>
<polygon class="cell" points="130,53 120,56 120,68 130,65"></polygon>
<polygon class="cell" points="120,56 110.00000000000001,59 110.00000000000001,71 120,68"></polygon>
<polygon class="cell" points="110.00000000000001,59 100,62 100,74 110.00000000000001,71"></polygon>
<polygon class="cell" points="100,62 89.99999999999999,65 89.99999999999999,77 100,74"></polygon>
<polygon class="cell" points="89.99999999999999,65 80,68 80,80 89.99999999999999,77"></polygon>
<polygon class="cell" points="80,68 70,71 70,83 80,80"></polygon>
<polygon class="cell" points="70,71 60.00000000000001,74 60.00000000000001,86 70,83"></polygon>
<polygon class="cell" points="60.00000000000001,74 50,77 50,89 60.00000000000001,86"></polygon>
<polygon class="cell" points="50,77 39.99999999999999,80 39.99999999999999,92 50,89"></polygon>
<polygon class="cell" points="39.99999999999999,80 30.000000000000004,83 30.000000000000004,95 39.99999999999999,92"></polygon>
<polygon class="cell" points="30.000000000000004,83 19.999999999999996,86 19.999999999999996,98 30.000000000000004,95"></polygon>
<polygon class="cell" points="19.999999999999996,86 10.000000000000009,89 10.000000000000009,101 19.999999999999996,98"></polygon>
<polygon class="cell" points="10.000000000000009,89 0,92 0,104 10.000000000000009,101"></polygon>
<polygon class="cell" points="200,44 190,47 190,59 200,56"></polygon>
<polygon class="cell" points="190,47 180,50 180,62 190,59"></polygon>
<polygon class="cell" points="180,50 170,53 170,65 180,62"></polygon>
<polygon class="cell" points="170,53 160,56 160,68 170,65"></polygon>
<polygon class="cell" points="160,56 150,59 150,71 160,68"></polygon>
<polygon class="cell" points="150,59 140,62 140,74 150,71"></polygon>
<polygon class="cell" points="140,62 130,65 130,77 140,74"></polygon>
<polygon class="cell" points="130,65 120,68 120,80 130,77"></polygon>
<polygon class="cell" points="120,68 110.00000000000001,71 110.00000000000001,83 120,80"></polygon>
<polygon class="cell" points="110.00000000000001,71 100,74 100,86 110.00000000000001,83"></polygon>
<polygon class="cell" points="100,74 89.99999999999999,77 89.99999999999999,89 100,86"></polygon>
<polygon class="cell" points="89.99999999999999,77 80,80 80,92 89.99999999999999,89"></polygon>
<polygon class="cell" points="80,80 70,83 70,95 80,92"></polygon>
<polygon class="cell" points="70,83 60.00000000000001,86 60.00000000000001,98 70,95"></polygon>
<polygon class="cell" points="60.00000000000001,86 50,89 50,101 60.00000000000001,98"></polygon>
<polygon class="cell" points="50,89 39.99999999999999,92 39.99999999999999,104.00000000000001 50,101"></polygon>
<polygon class="cell" points="39.99999999999999,92 30.000000000000004,95 30.000000000000004,107 39.99999999999999,104.00000000000001"></polygon>
<polygon class="cell" points="30.000000000000004,95 19.999999999999996,98 19.999999999999996,110 30.000000000000004,107"></polygon>
<polygon class="cell" points="19.999999999999996,98 10.000000000000009,101 10.000000000000009,112.99999999999999 19.999999999999996,110"></polygon>
<polygon class="cell" points="10.000000000000009,101 0,104 0,116 10.000000000000009,112.99999999999999"></polygon>
<polygon class="cell" points="200,56 190,59 190,71 200,68"></polygon>
<polygon class="cell" points="190,59 180,62 180,74 190,71"></polygon>
<polygon class="cell" points="180,62 170,65 170,77 180,74"></polygon>
<polygon class="cell" points="170,65 160,68 160,80 170,77"></polygon>
<polygon class="cell" points="160,68 150,71 150,83 160,80"></polygon>
<polygon class="cell" points="150,71 140,74 140,86 150,83"></polygon>
<polygon class="cell" points="140,74 130,77 130,89 140,86"></polygon>
<polygon class="cell" points="130,77 120,80 120,92 130,89"></polygon>
<polygon class="cell" points="120,80 110.00000000000001,83 110.00000000000001,95 120,92"></polygon>
<polygon class="cell" points="110.00000000000001,83 100,86 100,98 110.00000000000001,95"></polygon>
<polygon class="cell" points="100,86 89.99999999999999,89 89.99999999999999,101 100,98"></polygon>
<polygon class="cell" points="89.99999999999999,89 80,92 80,104 89.99999999999999,101"></polygon>
<polygon class="cell" points="80,92 70,95 70,107 80,104"></polygon>
<polygon class="cell" points="70,95 60.00000000000001,98 60.00000000000001,110 70,107"></polygon>
<polygon class="cell" points="60.00000000000001,98 50,101 50,113 60.00000000000001,110"></polygon>
<polygon class="cell" points="50,101 39.99999999999999,104.00000000000001 39.99999999999999,116 50,113"></polygon>
<polygon class="cell" points="39.99999999999999,104.00000000000001 30.000000000000004,107 30.000000000000004,119 39.99999999999999,116"></polygon>
<polygon class="cell" points="30.000000000000004,107 19.999999999999996,110 19.999999999999996,122 30.000000000000004,119"></polygon>
<polygon class="cell" points="19.999999999999996,110 10.000000000000009,112.99999999999999 10.000000000000009,125 19.999999999999996,122"></polygon>
<polygon class="cell" points="10.000000000000009,112.99999999999999 0,116 0,128 10.000000000000009,125"></polygon>
<polygon class="cell" points="200,68 190,71 190,83 200,80"></polygon>
<polygon class="cell" points="190,71 180,74 180,86 190,83"></polygon>
<polygon class="cell" points="180,74 170,77 170,89 180,86"></polygon>
<polygon class="cell" points="170,77 160,80 160,92 170,89"></polygon>
<polygon class="cell" points="160,80 150,83 150,95 160,92"></polygon>
<polygon class="cell" points="150,83 140,86 140,98 150,95"></polygon>
<polygon class="cell" points="140,86 130,89 130,101 140,98"></polygon>
<polygon class="cell" points="130,89 120,92 120,104 130,101"></polygon>
<polygon class="cell" points="120,92 110.00000000000001,95 110.00000000000001,107 120,104"></polygon>
<polygon class="cell" points="110.00000000000001,95 100,98 100,110 110.00000000000001,107"></polygon>
<polygon class="cell" points="100,98 89.99999999999999,101 89.99999999999999,113 100,110"></polygon>
<polygon class="cell" points="89.99999999999999,101 80,104 80,116 89.99999999999999,113"></polygon>
<polygon class="cell" points="80,104 70,107 70,119 80,116"></polygon>
<polygon class="cell" points="70,107 60.00000000000001,110 60.00000000000001,122 70,119"></polygon>
<polygon class="cell" points="60.00000000000001,110 50,113 50,125 60.00000000000001,122"></polygon>
<polygon class="cell" points="50,113 39.99999999999999,116 39.99999999999999,128 50,125"></polygon>
<polygon class="cell" points="39.99999999999999,116 30.000000000000004,119 30.000000000000004,131 39.99999999999999,128"></polygon>
<polygon class="cell" points="30.000000000000004,119 19.999999999999996,122 19.999999999999996,134 30.000000000000004,131"></polygon>
<polygon class="cell" points="19.999999999999996,122 10.000000000000009,125 10.000000000000009,137 19.999999999999996,134"></polygon>
<polygon class="cell" points="10.000000000000009,125 0,128 0,140 10.000000000000009,137"></polygon>
<polygon class="cell" points="200,80 190,83 190,94.99999999999999 200,92"></polygon>
<polygon class="cell" points="190,83 180,86 180,98 190,94.99999999999999"></polygon>
<polygon class="cell" points="180,86 170,89 170,101 180,98"></polygon>
<polygon class="cell" points="170,89 160,92 160,104.00000000000001 170,101"></polygon>
<polygon class="cell" points="160,92 150,95 150,107 160,104.00000000000001"></polygon>
<polygon class="cell" points="150,95 140,98 140,110 150,107"></polygon>
<polygon class="cell" points="140,98 130,101 130,113 140,110"></polygon>
<polygon class="cell" points="130,101 120,104 120,116 130,113"></polygon>
<polygon class="cell" points="120,104 110.00000000000001,107 110.00000000000001,119 120,116"></polygon>
<polygon class="cell" points="110.00000000000001,107 100,110 100,122 110.00000000000001,119"></polygon>
<polygon class="cell" points="100,110 89.99999999999999,113 89.99999999999999,125 100,122"></polygon>
<polygon class="cell" points="89.99999999999999,113 80,116 80,128 89.99999999999999,125"></polygon>
<polygon class="cell" points="80,116 70,119 70,131 80,128"></polygon>
<polygon class="cell" points="70,119 60.00000000000001,122 60.00000000000001,134 70,131"></polygon>
<polygon class="cell" points="60.00000000000001,122 50,125 50,137 60.00000000000001,134"></polygon>
<polygon class="cell" points="50,125 39.99999999999999,128 39.99999999999999,140 50,137"></polygon>
<polygon class="cell" points="39.99999999999999,128 30.000000000000004,131 30.000000000000004,143 39.99999999999999,140"></polygon>
<polygon class="cell" points="30.000000000000004,131 19.999999999999996,134 19.999999999999996,146 30.000000000000004,143"></polygon>
<polygon class="cell" points="19.999999999999996,134 10.000000000000009,137 10.000000000000009,149 19.999999999999996,146"></polygon>
<polygon class="cell" points="10.000000000000009,137 0,140 0,152 10.000000000000009,149"></polygon>
<polygon class="cell" points="200,92 190,94.99999999999999 190,107 200,104"></polygon>
<polygon class="cell" points="190,94.99999999999999 180,98 180,110.00000000000001 190,107"></polygon>
<polygon class="cell" points="180,98 170,101 170,112.99999999999999 180,110.00000000000001"></polygon>
<polygon class="cell" points="170,101 160,104.00000000000001 160,116 170,112.99999999999999"></polygon>
<polygon class="cell" points="160,104.00000000000001 150,107 150,119 160,116"></polygon>
<polygon class="cell" points="150,107 140,110 140,122 150,119"></polygon>
<polygon class="cell" points="140,110 130,113 130,125 140,122"></polygon>
<polygon class="cell" points="130,113 120,116 120,128 130,125"></polygon>
<polygon class="cell" points="120,116 110.00000000000001,119 110.00000000000001,131 120,128"></polygon>
<polygon class="cell" points="110.00000000000001,119 100,122 100,134 110.00000000000001,131"></polygon>
<polygon class="cell" points="100,122 89.99999999999999,125 89.99999999999999,137 100,134"></polygon>
<polygon class="cell" points="89.99999999999999,125 80,128 80,140 89.99999999999999,137"></polygon>
<polygon class="cell" points="80,128 70,131 70,143 80,140"></polygon>
<polygon class="cell" points="70,131 60.00000000000001,134 60.00000000000001,146 70,143"></polygon>
<polygon class="cell" points="60.00000000000001,134 50,137 50,149 60.00000000000001,146"></polygon>
<polygon class="cell" points="50,137 39.99999999999999,140 39.99999999999999,152 50,149"></polygon>
<polygon class="cell" points="39.99999999999999,140 30.000000000000004,143 30.000000000000004,155 39.99999999999999,152"></polygon>
<polygon class="cell" points="30.000000000000004,143 19.999999999999996,146 19.999999999999996,158 30.000000000000004,155"></polygon>
<polygon class="cell" points="19.999999999999996,146 10.000000000000009,149 10.000000000000009,161 19.999999999999996,158"></polygon>
<polygon class="cell" points="10.000000000000009,149 0,152 0,164 10.000000000000009,161"></polygon>
<polygon class="cell" points="200,104 190,107 190,118.99999999999999 200,116"></polygon>
<polygon class="cell" points="190,107 180,110.00000000000001 180,122 190,118.99999999999999"></polygon>
<polygon class="cell" points="180,110.00000000000001 170,112.99999999999999 170,125 180,122"></polygon>
<polygon class="cell" points="170,112.99999999999999 160,116 160,128 170,125"></polygon>
<polygon class="cell" points="160,116 150,119 150,131 160,128"></polygon>
<polygon class="cell" points="150,119 140,122 140,134 150,131"></polygon>
<polygon class="cell" points="140,122 130,125 130,137 140,134"></polygon>
<polygon class="cell" points="130,125 120,128 120,140 130,137"></polygon>
<polygon class="cell" points="120,128 110.00000000000001,131 110.00000000000001,143 120,140"></polygon>
<polygon class="cell" points="110.00000000000001,131 100,134 100,146 110.00000000000001,143"></polygon>
<polygon class="cell" points="100,134 89.99999999999999,137 89.99999999999999,149 100,146"></polygon>
<polygon class="cell" points="89.99999999999999,137 80,140 80,152 89.99999999999999,149"></polygon>
<polygon class="cell" points="80,140 70,143 70,155 80,152"></polygon>
<polygon class="cell" points="70,143 60.00000000000001,146 60.00000000000001,158 70,155"></polygon>
<polygon class="cell" points="60.00000000000001,146 50,149 50,161 60.00000000000001,158"></polygon>
<polygon class="cell" points="50,149 39.99999999999999,152 39.99999999999999,164 50,161"></polygon>
<polygon class="cell" points="39.99999999999999,152 30.000000000000004,155 30.000000000000004,167 39.99999999999999,164"></polygon>
<polygon class="cell" points="30.000000000000004,155 19.999999999999996,158 19.999999999999996,170 30.000000000000004,167"></polygon>
<polygon class="cell" points="19.999999999999996,158 10.000000000000009,161 10.000000000000009,173 19.999999999999996,170"></polygon>
<polygon class="cell" points="10.000000000000009,161 0,164 0,176 10.000000000000009,173"></polygon>
<polygon class="cell" points="200,116 190,118.99999999999999 190,131 200,128"></polygon>
<polygon class="cell" points="190,118.99999999999999 180,122 180,134 190,131"></polygon>
<polygon class="cell" points="180,122 170,125 170,137 180,134"></polygon>
<polygon class="cell" points="170,125 160,128 160,140 170,137"></polygon>
<polygon class="cell" points="160,128 150,131 150,143 160,140"></polygon>
<polygon class="cell" points="150,131 140,134 140,146 150,143"></polygon>
<polygon class="cell" points="140,134 130,137 130,149 140,146"></polygon>
<polygon class="cell" points="130,137 120,140 120,152 130,149"></polygon>
<polygon class="cell" points="120,140 110.00000000000001,143 110.00000000000001,155 120,152"></polygon>
<polygon class="cell" points="110.00000000000001,143 100,146 100,158 110.00000000000001,155"></polygon>
<polygon class="cell" points="100,146 89.99999999999999,149 89.99999999999999,161 100,158"></polygon>
<polygon class="cell" points="89.99999999999999,149 80,152 80,164 89.99999999999999,161"></polygon>
<polygon class="cell" points="80,152 70,155 70,167 80,164"></polygon>
<polygon class="cell" points="70,155 60.00000000000001,158 60.00000000000001,170 70,167"></polygon>
<polygon class="cell" points="60.00000000000001,158 50,161 50,173 60.00000000000001,170"></polygon>
<polygon class="cell" points="50,161 39.99999999999999,164 39.99999999999999,176 50,173"></polygon>
<polygon class="cell" points="39.99999999999999,164 30.000000000000004,167 30.000000000000004,179 39.99999999999999,176"></polygon>
<polygon class="cell" points="30.000000000000004,167 19.999999999999996,170 19.999999999999996,182 30.000000000000004,179"></polygon>
<polygon class="cell" points="19.999999999999996,170 10.000000000000009,173 10.000000000000009,185 19.999999999999996,182"></polygon>
<polygon class="cell" points="10.000000000000009,173 0,176 0,188 10.000000000000009,185"></polygon>
<polygon class="cell" points="200,128 190,131 190,143 200,140"></polygon>
<polygon class="cell" points="190,131 180,134 180,146 190,143"></polygon>
<polygon class="cell" points="180,134 170,137 170,149 180,146"></polygon>
<polygon class="cell" points="170,137 160,140 160,152 170,149"></polygon>
<polygon class="cell" points="160,140 150,143 150,155 160,152"></polygon>
<polygon class="cell" points="150,143 140,146 140,158 150,155"></polygon>
<polygon class="cell" points="140,146 130,149 130,161 140,158"></polygon>
<polygon class="cell" points="130,149 120,152 120,164 130,161"></polygon>
<polygon class="cell" points="120,152 110.00000000000001,155 110.00000000000001,167 120,164"></polygon>
<polygon class="cell" points="110.00000000000001,155 100,158 100,170 110.00000000000001,167"></polygon>
<polygon class="cell" points="100,158 89.99999999999999,161 89.99999999999999,173 100,170"></polygon>
<polygon class="cell" points="89.99999999999999,161 80,164 80,176 89.99999999999999,173"></polygon>
<polygon class="cell" points="80,164 70,167 70,179 80,176"></polygon>
<polygon class="cell" points="70,167 60.00000000000001,170 60.00000000000001,182 70,179"></polygon>
<polygon class="cell" points="60.00000000000001,170 50,173 50,185 60.00000000000001,182"></polygon>
<polygon class="cell" points="50,173 39.99999999999999,176 39.99999999999999,188 50,185"></polygon>
<polygon class="cell" points="39.99999999999999,176 30.000000000000004,179 30.000000000000004,191 39.99999999999999,188"></polygon>
<polygon class="cell" points="30.000000000000004,179 19.999999999999996,182 19.999999999999996,194 30.000000000000004,191"></polygon>
<polygon class="cell" points="19.999999999999996,182 10.000000000000009,185 10.000000000000009,197 19.999999999999996,194"></polygon>
<polygon class="cell" points="10.000000000000009,185 0,188 0,200 10.000000000000009,197"></polygon>
<polygon class="cell" points="200,140 190,143 190,155 200,152"></polygon>
<polygon class="cell" points="190,143 180,146 180,158 190,155"></polygon>
<polygon class="cell" points="180,146 170,149 170,161 180,158"></polygon>
<polygon class="cell" points="170,149 160,152 160,164 170,161"></polygon>
<polygon class="cell" points="160,152 150,155 150,167 160,164"></polygon>
<polygon class="cell" points="150,155 140,158 140,170 150,167"></polygon>
<polygon class="cell" points="140,158 130,161 130,173 140,170"></polygon>
<polygon class="cell" points="130,161 120,164 120,176 130,173"></polygon>
<polygon class="cell" points="120,164 110.00000000000001,167 110.00000000000001,179 120,176"></polygon>
<polygon class="cell" points="110.00000000000001,167 100,170 100,182 110.00000000000001,179"></polygon>
<polygon class="cell" points="100,170 89.99999999999999,173 89.99999999999999,185 100,182"></polygon>
<polygon class="cell" points="89.99999999999999,173 80,176 80,188 89.99999999999999,185"></polygon>
<polygon class="cell" points="80,176 70,179 70,191 80,188"></polygon>
<polygon class="cell" points="70,179 60.00000000000001,182 60.00000000000001,194 70,191"></polygon>
<polygon class="cell" points="60.00000000000001,182 50,185 50,197 60.00000000000001,194"></polygon>
<polygon class="cell" points="50,185 39.99999999999999,188 39.99999999999999,200 50,197"></polygon>
<polygon class="cell" points="39.99999999999999,188 30.000000000000004,191 30.000000000000004,203 39.99999999999999,200"></polygon>
<polygon class="cell" points="30.000000000000004,191 19.999999999999996,194 19.999999999999996,206 30.000000000000004,203"></polygon>
<polygon class="cell" points="19.999999999999996,194 10.000000000000009,197 10.000000000000009,208.99999999999997 19.999999999999996,206"></polygon>
<polygon class="cell" points="10.000000000000009,197 0,200 0,212 10.000000000000009,208.99999999999997"></polygon>
<polygon class="cell" points="200,152 190,155 190,166.99999999999997 200,164"></polygon>
<polygon class="cell" points="190,155 180,158 180,170 190,166.99999999999997"></polygon>
<polygon class="cell" points="180,158 170,161 170,173 180,170"></polygon>
<polygon class="cell" points="170,161 160,164 160,176.00000000000003 170,173"></polygon>
<polygon class="cell" points="160,164 150,167 150,179 160,176.00000000000003"></polygon>
<polygon class="cell" points="150,167 140,170 140,182 150,179"></polygon>
<polygon class="cell" points="140,170 130,173 130,185 140,182"></polygon>
<polygon class="cell" points="130,173 120,176 120,188 130,185"></polygon>
<polygon class="cell" points="120,176 110.00000000000001,179 110.00000000000001,191 120,188"></polygon>
<polygon class="cell" points="110.00000000000001,179 100,182 100,194 110.00000000000001,191"></polygon>
<polygon class="cell" points="100,182 89.99999999999999,185 89.99999999999999,197 100,194"></polygon>
<polygon class="cell" points="89.99999999999999,185 80,188 80,200 89.99999999999999,197"></polygon>
<polygon class="cell" points="80,188 70,191 70,203 80,200"></polygon>
<polygon class="cell" points="70,191 60.00000000000001,194 60.00000000000001,206 70,203"></polygon>
<polygon class="cell" points="60.00000000000001,194 50,197 50,209 60.00000000000001,206"></polygon>
<polygon class="cell" points="50,197 39.99999999999999,200 39.99999999999999,212 50,209"></polygon>
<polygon class="cell" points="39.99999999999999,200 30.000000000000004,203 30.000000000000004,215 39.99999999999999,212"></polygon>
<polygon class="cell" points="30.000000000000004,203 19.999999999999996,206 19.999999999999996,218 30.000000000000004,215"></polygon>
<polygon class="cell" points="19.999999999999996,206 10.000000000000009,208.99999999999997 10.000000000000009,221 19.999999999999996,218"></polygon>
<polygon class="cell" points="10.000000000000009,208.99999999999997 0,212 0,224 10.000000000000009,221"></polygon>
<polygon class="cell" points="200,164 190,166.99999999999997 190,179 200,176"></polygon>
<polygon class="cell" points="190,166.99999999999997 180,170 180,182 190,179"></polygon>
<polygon class="cell" points="180,170 170,173 170,185 180,182"></polygon>
<polygon class="cell" points="170,173 160,176.00000000000003 160,188 170,185"></polygon>
<polygon class="cell" points="160,176.00000000000003 150,179 150,191 160,188"></polygon>
<polygon class="cell" points="150,179 140,182 140,194 150,191"></polygon>
<polygon class="cell" points="140,182 130,185 130,197 140,194"></polygon>
<polygon class="cell" points="130,185 120,188 120,200 130,197"></polygon>
<polygon class="cell" points="120,188 110.00000000000001,191 110.00000000000001,203 120,200"></polygon>
<polygon class="cell" points="110.00000000000001,191 100,194 100,206 110.00000000000001,203"></polygon>
<polygon class="cell" points="100,194 89.99999999999999,197 89.99999999999999,209 100,206"></polygon>
<polygon class="cell" points="89.99999999999999,197 80,200 80,212 89.99999999999999,209"></polygon>
<polygon class="cell" points="80,200 70,203 70,215 80,212"></polygon>
<polygon class="cell" points="70,203 60.00000000000001,206 60.00000000000001,218 70,215"></polygon>
<polygon class="cell" points="60.00000000000001,206 50,209 50,221 60.00000000000001,218"></polygon>
<polygon class="cell" points="50,209 39.99999999999999,212 39.99999999999999,224 50,221"></polygon>
<polygon class="cell" points="39.99999999999999,212 30.000000000000004,215 30.000000000000004,227 39.99999999999999,224"></polygon>
<polygon class="cell" points="30.000000000000004,215 19.999999999999996,218 19.999999999999996,230 30.000000000000004,227"></polygon>
<polygon class="cell" points="19.999999999999996,218 10.000000000000009,221 10.000000000000009,233 19.999999999999996,230"></polygon>
<polygon class="cell" points="10.000000000000009,221 0,224 0,236 10.000000000000009,233"></polygon>
<polygon class="cell" points="200,176 190,179 190,191 200,188"></polygon>
<polygon class="cell" points="190,179 180,182 180,194.00000000000003 190,191"></polygon>
<polygon class="cell" points="180,182 170,185 170,196.99999999999997 180,194.00000000000003"></polygon>
<polygon class="cell" points="170,185 160,188 160,200 170,196.99999999999997"></polygon>
<polygon class="cell" points="160,188 150,191 150,203 160,200"></polygon>
<polygon class="cell" points="150,191 140,194 140,206 150,203"></polygon>
<polygon class="cell" points="140,194 130,197 130,209 140,206"></polygon>
<polygon class="cell" points="130,197 120,200 120,212 130,209"></polygon>
<polygon class="cell" points="120,200 110.00000000000001,203 110.00000000000001,215 120,212"></polygon>
<polygon class="cell" points="110.00000000000001,203 100,206 100,218 110.00000000000001,215"></polygon>
<polygon class="cell" points="100,206 89.99999999999999,209 89.99999999999999,221 100,218"></polygon>
<polygon class="cell" points="89.99999999999999,209 80,212 80,224 89.99999999999999,221"></polygon>
<polygon class="cell" points="80,212 70,215 70,227 80,224"></polygon>
<polygon class="cell" points="70,215 60.00000000000001,218 60.00000000000001,230 70,227"></polygon>
<polygon class="cell" points="60.00000000000001,218 50,221 50,233 60.00000000000001,230"></polygon>
<polygon class="cell" points="50,221 39.99999999999999,224 39.99999999999999,236 50,233"></polygon>
<polygon class="cell" points="39.99999999999999,224 30.000000000000004,227 30.000000000000004,239 39.99999999999999,236"></polygon>
<polygon class="cell" points="30.000000000000004,227 19.999999999999996,230 19.999999999999996,242 30.000000000000004,239"></polygon>
<polygon class="cell" points="19.999999999999996,230 10.000000000000009,233 10.000000000000009,245 19.999999999999996,242"></polygon>
<polygon class="cell" points="10.000000000000009,233 0,236 0,248 10.000000000000009,245"></polygon>
<polygon class="cell" points="200,188 190,191 190,203 200,200"></polygon>
<polygon class="cell" points="190,191 180,194.00000000000003 180,206 190,203"></polygon>
<polygon class="cell" points="180,194.00000000000003 170,196.99999999999997 170,209 180,206"></polygon>
<polygon class="cell" points="170,196.99999999999997 160,200 160,212 170,209"></polygon>
<polygon class="cell" points="160,200 150,203 150,215 160,212"></polygon>
<polygon class="cell" points="150,203 140,206 140,218 150,215"></polygon>
<polygon class="cell" points="140,206 130,209 130,221 140,218"></polygon>
<polygon class="cell" points="130,209 120,212 120,224 130,221"></polygon>
<polygon class="cell" points="120,212 110.00000000000001,215 110.00000000000001,227 120,224"></polygon>
<polygon class="cell" points="110.00000000000001,215 100,218 100,230 110.00000000000001,227"></polygon>
<polygon class="cell" points="100,218 89.99999999999999,221 89.99999999999999,233 100,230"></polygon>
<polygon class="cell" points="89.99999999999999,221 80,224 80,236 89.99999999999999,233"></polygon>
<polygon class="cell" points="80,224 70,227 70,239 80,236"></polygon>
<polygon class="cell" points="70,227 60.00000000000001,230 60.00000000000001,242 70,239"></polygon>
<polygon class="cell" points="60.00000000000001,230 50,233 50,245 60.00000000000001,242"></polygon>
<polygon class="cell" points="50,233 39.99999999999999,236 39.99999999999999,248 50,245"></polygon>
<polygon class="cell" points="39.99999999999999,236 30.000000000000004,239 30.000000000000004,251 39.99999999999999,248"></polygon>
<polygon class="cell" points="30.000000000000004,239 19.999999999999996,242 19.999999999999996,254 30.000000000000004,251"></polygon>
<polygon class="cell" points="19.999999999999996,242 10.000000000000009,245 10.000000000000009,257 19.999999999999996,254"></polygon>
<polygon class="cell" points="10.000000000000009,245 0,248 0,260 10.000000000000009,257"></polygon>
<polygon class="cell" points="200,200 190,203 190,214.99999999999997 200,212"></polygon>
<polygon class="cell" points="190,203 180,206 180,218 190,214.99999999999997"></polygon>
<polygon class="cell" points="180,206 170,209 170,221 180,218"></polygon>
<polygon class="cell" points="170,209 160,212 160,224.00000000000003 170,221"></polygon>
<polygon class="cell" points="160,212 150,215 150,227 160,224.00000000000003"></polygon>
<polygon class="cell" points="150,215 140,218 140,229.99999999999997 150,227"></polygon>
<polygon class="cell" points="140,218 130,221 130,233 140,229.99999999999997"></polygon>
<polygon class="cell" points="130,221 120,224 120,236 130,233"></polygon>
<polygon class="cell" points="120,224 110.00000000000001,227 110.00000000000001,239 120,236"></polygon>
<polygon class="cell" points="110.00000000000001,227 100,230 100,242 110.00000000000001,239"></polygon>
<polygon class="cell" points="100,230 89.99999999999999,233 89.99999999999999,245 100,242"></polygon>
<polygon class="cell" points="89.99999999999999,233 80,236 80,248 89.99999999999999,245"></polygon>
<polygon class="cell" points="80,236 70,239 70,251 80,248"></polygon>
<polygon class="cell" points="70,239 60.00000000000001,242 60.00000000000001,254 70,251"></polygon>
<polygon class="cell" points="60.00000000000001,242 50,245 50,257 60.00000000000001,254"></polygon>
<polygon class="cell" points="50,245 39.99999999999999,248 39.99999999999999,260 50,257"></polygon>
<polygon class="cell" points="39.99999999999999,248 30.000000000000004,251 30.000000000000004,263 39.99999999999999,260"></polygon>
<polygon class="cell" points="30.000000000000004,251 19.999999999999996,254 19.999999999999996,266 30.000000000000004,263"></polygon>
<polygon class="cell" points="19.999999999999996,254 10.000000000000009,257 10.000000000000009,269 19.999999999999996,266"></polygon>
<polygon class="cell" points="10.000000000000009,257 0,260 0,272 10.000000000000009,269"></polygon>
<polygon class="cell" points="200,212 190,214.99999999999997 190,226.99999999999997 200,224"></polygon>
<polygon class="cell" points="190,214.99999999999997 180,218 180,230 190,226.99999999999997"></polygon>
<polygon class="cell" points="180,218 170,221 170,233 180,230"></polygon>
<polygon class="cell" points="170,221 160,224.00000000000003 160,236.00000000000003 170,233"></polygon>
<polygon class="cell" points="160,224.00000000000003 150,227 150,239 160,236.00000000000003"></polygon>
<polygon class="cell" points="150,227 140,229.99999999999997 140,242 150,239"></polygon>
<polygon class="cell" points="140,229.99999999999997 130,233 130,245 140,242"></polygon>
<polygon class="cell" points="130,233 120,236 120,248 130,245"></polygon>
<polygon class="cell" points="120,236 110.00000000000001,239 110.00000000000001,251 120,248"></polygon>
<polygon class="cell" points="110.00000000000001,239 100,242 100,254 110.00000000000001,251"></polygon>
<polygon class="cell" points="100,242 89.99999999999999,245 89.99999999999999,257 100,254"></polygon>
<polygon class="cell" points="89.99999999999999,245 80,248 80,260 89.99999999999999,257"></polygon>
<polygon class="cell" points="80,248 70,251 70,263 80,260"></polygon>
<polygon class="cell" points="70,251 60.00000000000001,254 60.00000000000001,266 70,263"></polygon>
<polygon class="cell" points="60.00000000000001,254 50,257 50,269 60.00000000000001,266"></polygon>
<polygon class="cell" points="50,257 39.99999999999999,260 39.99999999999999,272 50,269"></polygon>
<polygon class="cell" points="39.99999999999999,260 30.000000000000004,263 30.000000000000004,275 39.99999999999999,272"></polygon>
<polygon class="cell" points="30.000000000000004,263 19.999999999999996,266 19.999999999999996,278 30.000000000000004,275"></polygon>
<polygon class="cell" points="19.999999999999996,266 10.000000000000009,269 10.000000000000009,281 19.999999999999996,278"></polygon>
<polygon class="cell" points="10.000000000000009,269 0,272 0,284 10.000000000000009,281"></polygon>
<polygon class="cell" points="200,224 190,226.99999999999997 190,239 200,236"></polygon>
<polygon class="cell" points="190,226.99999999999997 180,230 180,242 190,239"></polygon>
<polygon class="cell" points="180,230 170,233 170,245 180,242"></polygon>
<polygon class=&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0