纯css+div实现万圣节捉鬼游戏代码
代码语言：html
所属分类：游戏
代码描述：纯css+div实现万圣节捉鬼游戏代码，没有一行js代码，全部是css+div+svg实现，当鬼出洞时，点击抓住它。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Inter:wght@800;900&display=swap'>
<style>
@import url("https://fonts.googleapis.com/css?family=Lato");
* {
box-sizing: border-box;
}
body {
align-items: center;
background-color: #030d08;
color: #ffa500;
counter-reset: score;
display: flex;
font-family: 'Lato', sans-serif;
justify-content: center;
min-height: 100vh;
}
.game {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(var(--cols), 1fr);
grid-template-rows: repeat(var(--rows), 1fr);
height: 250px;
position: relative;
width: 250px;
}
@media (min-width: 768px) {
.game {
grid-gap: 25px;
height: 400px;
width: 400px;
}
}
.ghost-pen {
position: relative;
transform: translate(0, 50%);
}
.ghost,
.ghost__image {
animation: bob calc(var(--speed) * 1s) infinite ease;
animation-delay: calc(var(--delay) * 1s);
height: 45px;
transform: translate(0, 100%) scale(1);
width: 30px;
}
@media (min-width: 768px) {
.ghost,
.ghost__image {
height: 75px;
width: 60px;
}
}
.ghost {
cursor: pointer;
position: absolute;
z-index: 2;
opacity: 0;
}
.ghost__path {
fill: var(--color);
}
.ghost__mouth {
fill: #ffc0cb;
}
.ghost__eyes--busted {
display: none;
}
.ghost__image-body {
animation: none;
height: 100%;
width: 100%;
}
.ghost__container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
position: absolute;
width: 100%;
z-index: 3;
}
.ghost__container:after {
background: #000;
border-radius: 50% 50% 0 0;
box-shadow: 10px 0 0 #2e3131;
bottom: 0;
color: #2e3131;
content: 'R.I.P';
text-align: center;
line-height: 60px;
left: 0;
position: absolute;
right: 0;
top: 0;
transform: translate(0, 50%);
z-index: 3;
}
@media (min-width: 768px) {
.ghost__container:after {
font-size: 1.5rem;
line-height: 80px;
}
}
.ghost__container .ghost__container {
display: none;
}
.ghost:checked {
animation: busted 1.75s 0.25s both;
counter-increment: score var(--score);
}
.ghost:checked ~ .ghost__image {
animation: busted 1.75s 0.25s both;
}
.ghost:checked ~ .ghost__image .ghost__image-body {
animation: wiggle 1.75s 0.25s;
}
.ghost:checked ~ .ghost__image .ghost__image-body .ghost__eyes {
display: none;
}
.ghost:checked ~ .ghost__image .ghost__image-body .ghost__eyes--busted {
display: block;
}
.ghost:checked ~ .ghost__container {
display: flex;
animation: fadeIn calc(var(--delay) * 1s) both steps(2);
}
.menu {
opacity: 0;
}
.menu:checked,
.menu:checked ~ .title-screen {
display: none;
}
.menu:checked ~ .end {
animation: slideUp 15s both;
}
.menu:checked ~ .end .credit-ghost {
animation: float 2s 15s both;
}
.menu:checked ~ .end .credit-ghost svg {
animation: wiggle 2s 15s;
}
.end,
.title-screen,
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.title-screen,
.end {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 5;
background: linear-gradient(35deg, #f00, #000);
}
.backdrop {
animation: flash 10s infinite linear;
}
@-moz-keyframes flash {
71%, 73%, 75%, 77%, 79% {
background: rgba(255,255,204,0.5);
}
0%, 70%, 72%, 74%, 76%, 78%, 80%, 100% {
background: transparent;
}
}
@-webkit-keyframes flash {
71%, 73%, 75%, 77%, 79% {
background: rgba(255,255,204,0.5);
}
0%, 70%, 72%, 74%, 76%, 78%, 80%, 100% {
background: transparent;
}
}
@-o-keyframes flash {
71%, 73%, 75%, 77%, 79% {
background: rgba(255,255,204,0.5);
}
0%, 70%, 72%, 74%, 76%, 78%, 80%, 100% {
background: transparent;
}
}
@keyframes flash {
71%, 73%, 75%, 77%, 79% {
background: rgba(255,255,204,0.5);
}
0%, 70%, 72%, 74%, 76%, 78%, 80%, 100% {
background: transparent;
}
}
.menu {
height: 100vh;
width: 100vw;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 6;
}
.end {
background: linear-gradient(35deg, #f00, #000);
transform: translate(0, 100%);
}
.credit-ghost {
position: absolute;
left: 75%;
top: 100%;
animation: none;
}
.title {
letter-spacing: 4px;
font-size: 1.75rem;
margin: 0;
text-transform: uppercase;
}
@media (min-width: 768px) {
.title {
font-size: 3rem;
}
}
.title-screen__content {
display: grid;
grid-gap: 0 1rem;
align-content: center;
align-items: center;
grid-template-columns: auto 1fr;
grid-template-rows: repeat(3, auto);
max-width: 90vw;
}
.description {
grid-column: 2;
text-align: justify;
max-width: 210px;
}
button {
cursor: pointer;
grid-column: 2;
background: #fff;
color: #000;
text-transform: uppercase;
letter-spacing: 4px;
padding: 8px 12px;
}
.credit-ghost,
.title-ghost {
height: 65px;
width: 50px;
}
.credit-ghost .ghost__path,
.title-ghost .ghost__path {
fill: #fff;
}
.score {
margin-bottom: 2rem;
}
.score:after {
content: counter(score);
}
@-moz-keyframes bob {
50% {
transform: translate(0, -100%) scale(1.25);
}
}
@-webkit-keyframes bob {
50% {
transform: translate(0, -100%) scale(1.25);
}
}
@-o-keyframes bob {
50% {
transform: translate(0, -100%) scale(1.25);
}
}
@keyframes bob {
50% {
transform: translate(0, -100%) scale(1.25);
}
}
@-moz-keyframes slideUp {
95% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, 0);
}
}
@-webkit-keyframes slideUp {
95% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, 0);
}
}
@-o-keyframes slideUp {
95% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, 0);
}
}
@keyframes slideUp {
95% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, 0);
}
}
@-moz-keyframes float {
to {
transform: translate(0, -125vh);
}
}
@-webkit-keyframes float {
to {
transform: translate(0, -125vh);
}
}
@-o-keyframes float {
to {
transform: translate(0, -125vh);
}
}
@keyframes float {
to {
transform: translate(0, -125vh);
}
}
@-moz-keyframes busted {
0% {
transform: translate(0, -100%) scale(1.25);
}
100% {
opacity: 0;
transform: translate(0, -100vh) scale(0);
}
}
@-webkit-keyframes busted {
0% {
transform: translate(0, -100%) scale(1.25);
}
100% {
opacity: 0;
transform: translate(0, -100vh) scale(0);
}
}
@-o-keyframes busted {
0% {
transform: translate(0, -100%) scale(1.25);
}
100% {
opacity: 0;
transform: translate(0, -100vh) scale(0);
}
}
@keyframes busted {
0% {
transform: translate(0, -100%) scale(1.25);
}
100% {
opacity: 0;
transform: translate(0, -100vh) scale(0);
}
}
@-moz-keyframes wiggle {
25%, 75% {
transform: translate(-50%, 0);
}
50% {
transform: translate(50%, 0);
}
}
@-webkit-keyframes wiggle {
25%, 75% {
transform: translate(-50%, 0);
}
50% {
transform: translate(50%, 0);
}
}
@-o-keyframes wiggle {
25%, 75% {
transform: translate(-50%, 0);
}
50% {
transform: translate(50%, 0);
}
}
@keyframes wiggle {
25%, 75% {
transform: translate(-50%, 0);
}
50% {
transform: translate(50%, 0);
}
}
@-moz-keyframes fadeIn {
from {
opacity: 0;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
}
@-o-keyframes fadeIn {
from {
opacity: 0;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
}
</style>
</head>
<body >
<form>
<input class="menu" type="checkbox"/>
<div class="title-screen">
<div class="title-screen__content">
<svg class="ghost__image-body title-ghost" viewBox="0 0 100 130" preserveAspectRatio="xMinYMin">
<g id="layer1" transform="translate(0,-922.36216)">
<path class="ghost__path" id="path4149" d="m 87.104126,985.99028 c 3e-6,18.29482 23.310064,51.08502 7.251515,64.80642 -4.508673,3.8525 -10.735588,-6.2194 -16.533188,-5.808 -4.489803,0.3185 -7.636172,5.7797 -12.112396,6.2655 -5.152434,0.559 -9.879869,-4.3961 -15.050164,-4.066 -4.493939,0.2869 -8.076853,5.0762 -12.578149,5.1722 -4.822196,0.1028 -8.903453,-4.2416 -13.677721,-4.9617 -6.489307,-0.9788 -15.1515178,5.9929 -19.6454524,0.9765 -14.2159436,-15.8688 8.0865824,-46.7737 6.6754904,-65.00824 -1.7280703,-22.33068 -1.210964,-29.61106 6.765096,-41.60022 7.976059,-11.98915 18.994883,-19.4046 31.165941,-19.4046 12.171058,0 23.189882,7.41545 31.165941,19.4046 7.97606,11.98916 6.573083,25.92871 6.573087,44.22354 z" style="fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<circle class="ghost__eyes" id="path4152" r="4.9010091" cy="957.77557" cx="41.527569" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></circle>
<circle class="ghost__eyes" id="circle4156" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" cx="64.691391" cy="955.00385" r="8.6626558"></circle>
<path class="ghost__mouth" id="path4158" d="m 74.836967,972.6979 c -3e-6,11.63211 -14.670414,22.44764 -25.440609,22.44764 -10.770196,0 -19.303184,-0.71848 -19.303187,-12.35059 3e-6,-11.63211 8.852855,-13.5886 19.62305,-13.5886 10.770195,0 25.120743,-8.14052 25.120746,3.49155 z" style="fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<g class="ghost__eyes ghost__eyes--busted" id="g4167" transform="matrix(1.5105663,0,0,1.5105663,35.905034,-496.71423)">
<rect id="rect4162" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="692.03461" y="658.58441" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"></rect>
<rect id="rect4165" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" y="-700.53461" x="665.08441" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
</g>
<g class="ghost__eyes ghost__eyes--busted" id="g4171" transform="translate(22.470903,-3.2666991)">
<rect id="rect4173" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" y="658.58441" x="692.03461" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
<rect id="rect4175" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="665.08441" y="-700.53461" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)"></rect>
</g>
</g>
</svg>
<h1 class="title">Ghost <br/> Huntin'</h1>
<p class="description">
You'll get 15 seconds to bust as many ghosts as you can.
Colored ghosts score more points!
</p>
<button>Start</button>
</div>
</div>
<div class="backdrop"></div>
<div class="game" style="--rows: 3; --cols: 3">
<div class="ghost-pen">
<div class="ghost__container" style="--speed: 3.161066686827109; --delay: 2; --color: #fff; --score: 1">
<input class="ghost" type="checkbox"/>
<div class="ghost__image">
<svg class="ghost__image-body" preserveAspectRatio="xMinYMin" viewBox="0 0 100 130">
<g id="layer1" transform="translate(0,-922.36216)">
<path class="ghost__path" id="path4149" d="m 87.104126,985.99028 c 3e-6,18.29482 23.310064,51.08502 7.251515,64.80642 -4.508673,3.8525 -10.735588,-6.2194 -16.533188,-5.808 -4.489803,0.3185 -7.636172,5.7797 -12.112396,6.2655 -5.152434,0.559 -9.879869,-4.3961 -15.050164,-4.066 -4.493939,0.2869 -8.076853,5.0762 -12.578149,5.1722 -4.822196,0.1028 -8.903453,-4.2416 -13.677721,-4.9617 -6.489307,-0.9788 -15.1515178,5.9929 -19.6454524,0.9765 -14.2159436,-15.8688 8.0865824,-46.7737 6.6754904,-65.00824 -1.7280703,-22.33068 -1.210964,-29.61106 6.765096,-41.60022 7.976059,-11.98915 18.994883,-19.4046 31.165941,-19.4046 12.171058,0 23.189882,7.41545 31.165941,19.4046 7.97606,11.98916 6.573083,25.92871 6.573087,44.22354 z" style="fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<circle class="ghost__eyes" id="path4152" r="5" cy="961.0423" cx="19.056681" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></circle>
<circle class="ghost__eyes" id="circle4156" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" cx="76.471283" cy="960.05237" r="5"></circle>
<path id="path4158" d="m 79.58852,970.29888 c -5e-6,2.4602 -14.18229,4.45458 -31.677023,4.45458 -17.494733,0 -31.677018,-1.99438 -31.677023,-4.45458 5e-6,-2.4602 14.380271,0.099 31.875004,0.099 17.494733,0 31.479037,-2.55919 31.479042,-0.099 z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<g class="ghost__eyes ghost__eyes--busted" id="g4167">
<rect id="rect4162" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="692.03461" y="658.58441" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"></rect>
<rect id="rect4165" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" y="-700.53461" x="665.08441" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
</g>
<g class="ghost__eyes ghost__eyes--busted" id="g4171" transform="translate(57.414617,-0.98990468)">
<rect id="rect4173" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" y="658.58441" x="692.03461" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
<rect id="rect4175" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="665.08441" y="-700.53461" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)"></rect>
</g>
</g>
</svg>
</div>
<div class="ghost__container" style="--speed: 3.3936836529391976; --delay: 4; --color: #fff; --score: 1">
<input class="ghost" type="checkbox"/>
<div class="ghost__image">
<svg class="ghost__image-body" viewBox="0 0 100 130" preserveAspectRatio="xMinYMin">
<g id="layer1" transform="translate(0,-922.36216)">
<path class="ghost__path" id="path4149" d="m 87.104126,985.99028 c 3e-6,18.29482 23.310064,51.08502 7.251515,64.80642 -4.508673,3.8525 -10.735588,-6.2194 -16.533188,-5.808 -4.489803,0.3185 -7.636172,5.7797 -12.112396,6.2655 -5.152434,0.559 -9.879869,-4.3961 -15.050164,-4.066 -4.493939,0.2869 -8.076853,5.0762 -12.578149,5.1722 -4.822196,0.1028 -8.903453,-4.2416 -13.677721,-4.9617 -6.489307,-0.9788 -15.1515178,5.9929 -19.6454524,0.9765 -14.2159436,-15.8688 8.0865824,-46.7737 6.6754904,-65.00824 -1.7280703,-22.33068 -1.210964,-29.61106 6.765096,-41.60022 7.976059,-11.98915 18.994883,-19.4046 31.165941,-19.4046 12.171058,0 23.189882,7.41545 31.165941,19.4046 7.97606,11.98916 6.573083,25.92871 6.573087,44.22354 z" style="fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<g class="ghost__eyes ghost__eyes--busted" id="g4171" transform="matrix(1.6637807,0,0,1.6637807,28.456943,-641.01528)">
<rect id="rect4173" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" y="658.58441" x="692.03461" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
<rect id="rect4175" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="665.08441" y="-700.53461" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)"></rect>
</g>
<circle class="ghost__eyes" id="path4245" r="7.5" cy="958.1463" cx="38.385101" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></circle>
<g class="ghost__eyes ghost__eyes--busted" id="g4247" transform="matrix(1.6637807,0,0,1.6637807,6.6789885,-640.81728)">
<rect id="rect4249" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="692.03461" y="658.58441" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"></rect>
<rect id="rect4251" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" y="-700.53461" x="665.08441" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
</g>
<circle class="ghost__eyes" id="circle4253" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" cx="60.163055" cy="957.9483" r="7.5"></circle>
</g>
</svg>
</div>
<div class="ghost__container" style="--speed: 1.8373455643613101; --delay: 2; --color: #fff; --score: 1">
<input class="ghost" type="checkbox"/>
<div class="ghost__image">
<svg class="ghost__image-body" preserveAspectRatio="xMinYMin" viewBox="0 0 100 130">
<g id="layer1" transform="translate(0,-922.36216)">
<path class="ghost__path" id="path4149" d="m 87.104126,985.99028 c 3e-6,18.29482 23.310064,51.08502 7.251515,64.80642 -4.508673,3.8525 -10.735588,-6.2194 -16.533188,-5.808 -4.489803,0.3185 -7.636172,5.7797 -12.112396,6.2655 -5.152434,0.559 -9.879869,-4.3961 -15.050164,-4.066 -4.493939,0.2869 -8.076853,5.0762 -12.578149,5.1722 -4.822196,0.1028 -8.903453,-4.2416 -13.677721,-4.9617 -6.489307,-0.9788 -15.1515178,5.9929 -19.6454524,0.9765 -14.2159436,-15.8688 8.0865824,-46.7737 6.6754904,-65.00824 -1.7280703,-22.33068 -1.210964,-29.61106 6.765096,-41.60022 7.976059,-11.98915 18.994883,-19.4046 31.165941,-19.4046 12.171058,0 23.189882,7.41545 31.165941,19.4046 7.97606,11.98916 6.573083,25.92871 6.573087,44.22354 z" style="fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<circle class="ghost__eyes" id="path4152" r="5" cy="961.0423" cx="19.056681" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></circle>
<circle class="ghost__eyes" id="circle4156" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" cx="76.471283" cy="960.05237" r="5"></circle>
<path id="path4158" d="m 79.58852,970.29888 c -5e-6,2.4602 -14.18229,4.45458 -31.677023,4.45458 -17.494733,0 -31.677018,-1.99438 -31.677023,-4.45458 5e-6,-2.4602 14.380271,0.099 31.875004,0.099 17.494733,0 31.479037,-2.55919 31.479042,-0.099 z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<g class="ghost__eyes ghost__eyes--busted" id="g4167">
<rect id="rect4162" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="692.03461" y="658.58441" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"></rect>
<rect id="rect4165" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" y="-700.53461" x="665.08441" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
</g>
<g class="ghost__eyes ghost__eyes--busted" id="g4171" transform="translate(57.414617,-0.98990468)">
<rect id="rect4173" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" y="658.58441" x="692.03461" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
<rect id="rect4175" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="665.08441" y="-700.53461" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)"></rect>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="ghost-pen">
<div class="ghost__container" style="--speed: 3.3037545526376677; --delay: 5; --color: #fff; --score: 1">
<input class="ghost" type="checkbox"/>
<div class="ghost__image">
<svg class="ghost__image-body" preserveAspectRatio="xMinYMin" viewBox="0 0 100 130">
<g id="layer1" transform="translate(0,-922.36216)">
<path class="ghost__path" id="path4149" d="m 87.104126,985.99028 c 3e-6,18.29482 23.310064,51.08502 7.251515,64.80642 -4.508673,3.8525 -10.735588,-6.2194 -16.533188,-5.808 -4.489803,0.3185 -7.636172,5.7797 -12.112396,6.2655 -5.152434,0.559 -9.879869,-4.3961 -15.050164,-4.066 -4.493939,0.2869 -8.076853,5.0762 -12.578149,5.1722 -4.822196,0.1028 -8.903453,-4.2416 -13.677721,-4.9617 -6.489307,-0.9788 -15.1515178,5.9929 -19.6454524,0.9765 -14.2159436,-15.8688 8.0865824,-46.7737 6.6754904,-65.00824 -1.7280703,-22.33068 -1.210964,-29.61106 6.765096,-41.60022 7.976059,-11.98915 18.994883,-19.4046 31.165941,-19.4046 12.171058,0 23.189882,7.41545 31.165941,19.4046 7.97606,11.98916 6.573083,25.92871 6.573087,44.22354 z" style="fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<circle class="ghost__eyes" id="path4152" r="5" cy="961.0423" cx="19.056681" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></circle>
<circle class="ghost__eyes" id="circle4156" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" cx="76.471283" cy="960.05237" r="5"></circle>
<path id="path4158" d="m 79.58852,970.29888 c -5e-6,2.4602 -14.18229,4.45458 -31.677023,4.45458 -17.494733,0 -31.677018,-1.99438 -31.677023,-4.45458 5e-6,-2.4602 14.380271,0.099 31.875004,0.099 17.494733,0 31.479037,-2.55919 31.479042,-0.099 z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<g class="ghost__eyes ghost__eyes--busted" id="g4167">
<rect id="rect4162" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="692.03461" y="658.58441" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"></rect>
<rect id="rect4165" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" y="-700.53461" x="665.08441" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
</g>
<g class="ghost__eyes ghost__eyes--busted" id="g4171" transform="translate(57.414617,-0.98990468)">
<rect id="rect4173" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" y="658.58441" x="692.03461" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
<rect id="rect4175" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="665.08441" y="-700.53461" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)"></rect>
</g>
</g>
</svg>
</div>
<div class="ghost__container" style="--speed: 1.784303501371219; --delay: 4; --color: #c4fafb; --score: 5">
<input class="ghost" type="checkbox"/>
<div class="ghost__image">
<svg class="ghost__image-body" viewBox="0 0 100 130" preserveAspectRatio="xMinYMin">
<g id="layer1" transform="translate(0,-922.36216)">
<path class="ghost__path" id="path4149" d="m 87.104126,985.99028 c 3e-6,18.29482 23.310064,51.08502 7.251515,64.80642 -4.508673,3.8525 -10.735588,-6.2194 -16.533188,-5.808 -4.489803,0.3185 -7.636172,5.7797 -12.112396,6.2655 -5.152434,0.559 -9.879869,-4.3961 -15.050164,-4.066 -4.493939,0.2869 -8.076853,5.0762 -12.578149,5.1722 -4.822196,0.1028 -8.903453,-4.2416 -13.677721,-4.9617 -6.489307,-0.9788 -15.1515178,5.9929 -19.6454524,0.9765 -14.2159436,-15.8688 8.0865824,-46.7737 6.6754904,-65.00824 -1.7280703,-22.33068 -1.210964,-29.61106 6.765096,-41.60022 7.976059,-11.98915 18.994883,-19.4046 31.165941,-19.4046 12.171058,0 23.189882,7.41545 31.165941,19.4046 7.97606,11.98916 6.573083,25.92871 6.573087,44.22354 z" style="fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<path id="path4158" d="m 64.541935,968.77294 c -10e-7,1.76535 -11.355147,5.78254 -17.039796,5.78254 -5.684647,0 -16.023096,-4.26665 -16.023098,-6.03199 2e-6,-1.76535 11.896477,3.67918 17.581124,3.67918 5.684648,0 15.481769,-5.19507 15.48177,-3.42973 z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<g class="ghost__eyes ghost__eyes--busted" id="g4171" transform="translate(18.907238,-4.0586249)">
<rect id="rect4173" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" y="658.58441" x="692.03461" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
<rect id="rect4175" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="665.08441" y="-700.53461" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)"></rect>
</g>
<g class="ghost__eyes ghost__eyes--busted" id="g4215" transform="translate(38.309414,-3.8606434)">
<rect id="rect4217" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="692.03461" y="658.58441" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"></rect>
<rect id="rect4219" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" y="-700.53461" x="665.08441" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
</g>
<path class="ghost__eyes" id="circle4221" d="m 62.069108,959.55738 c 0,2.70675 -2.194256,-3.01825 -4.901009,-3.01825 -2.706753,0 -4.901009,5.725 -4.901009,3.01825 0,-2.70675 2.194256,-4.90101 4.901009,-4.90101 2.706753,0 4.901009,2.19426 4.901009,4.90101 z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<path class="ghost__eyes" id="path4224" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 42.666932,959.55738 c 0,2.70675 -2.194256,-3.01825 -4.901009,-3.01825 -2.706753,0 -4.901009,5.725 -4.901009,3.01825 0,-2.70675 2.194256,-4.90101 4.901009,-4.90101 2.706753,0 4.901009,2.19426 4.901009,4.90101 z"></path>
</g>
</svg>
</div>
<div class="ghost__container" style="--speed: 1.2227533447027517; --delay: 5; --color: #fff; --score: 1">
<input class="ghost" type="checkbox"/>
<div class="ghost__image">
<svg class="ghost__image-body" viewBox="0 0 100 130" preserveAspectRatio="xMinYMin">
<g id="layer1" transform="translate(0,-922.36216)">
<path class="ghost__path" id="path4149" d="m 87.104126,985.99028 c 3e-6,18.29482 23.310064,51.08502 7.251515,64.80642 -4.508673,3.8525 -10.735588,-6.2194 -16.533188,-5.808 -4.489803,0.3185 -7.636172,5.7797 -12.112396,6.2655 -5.152434,0.559 -9.879869,-4.3961 -15.050164,-4.066 -4.493939,0.2869 -8.076853,5.0762 -12.578149,5.1722 -4.822196,0.1028 -8.903453,-4.2416 -13.677721,-4.9617 -6.489307,-0.9788 -15.1515178,5.9929 -19.6454524,0.9765 -14.2159436,-15.8688 8.0865824,-46.7737 6.6754904,-65.00824 -1.7280703,-22.33068 -1.210964,-29.61106 6.765096,-41.60022 7.976059,-11.98915 18.994883,-19.4046 31.165941,-19.4046 12.171058,0 23.189882,7.41545 31.165941,19.4046 7.97606,11.98916 6.573083,25.92871 6.573087,44.22354 z" style="fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<path id="path4158" d="m 64.541935,968.77294 c -10e-7,1.76535 -11.355147,5.78254 -17.039796,5.78254 -5.684647,0 -16.023096,-4.26665 -16.023098,-6.03199 2e-6,-1.76535 11.896477,3.67918 17.581124,3.67918 5.684648,0 15.481769,-5.19507 15.48177,-3.42973 z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<g class="ghost__eyes ghost__eyes--busted" id="g4171" transform="translate(18.907238,-4.0586249)">
<rect id="rect4173" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" y="658.58441" x="692.03461" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
<rect id="rect4175" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="665.08441" y="-700.53461" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)"></rect>
</g>
<g class="ghost__eyes ghost__eyes--busted" id="g4215" transform="translate(38.309414,-3.8606434)">
<rect id="rect4217" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="692.03461" y="658.58441" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"></rect>
<rect id="rect4219" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" y="-700.53461" x="665.08441" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
</g>
<path class="ghost__eyes" id="circle4221" d="m 62.069108,959.55738 c 0,2.70675 -2.194256,-3.01825 -4.901009,-3.01825 -2.706753,0 -4.901009,5.725 -4.901009,3.01825 0,-2.70675 2.194256,-4.90101 4.901009,-4.90101 2.706753,0 4.901009,2.19426 4.901009,4.90101 z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<path class="ghost__eyes" id="path4224" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 42.666932,959.55738 c 0,2.70675 -2.194256,-3.01825 -4.901009,-3.01825 -2.706753,0 -4.901009,5.725 -4.901009,3.01825 0,-2.70675 2.194256,-4.90101 4.901009,-4.90101 2.706753,0 4.901009,2.19426 4.901009,4.90101 z"></path>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="ghost-pen">
<div class="ghost__container" style="--speed: 1.9994697816682507; --delay: 3; --color: #fff; --score: 1">
<input class="ghost" type="checkbox"/>
<div class="ghost__image">
<svg class="ghost__image-body" preserveAspectRatio="xMinYMin" viewBox="0 0 100 130">
<g id="layer1" transform="translate(0,-922.36216)">
<path class="ghost__path" id="path4149" d="m 87.104126,985.99028 c 3e-6,18.29482 23.310064,51.08502 7.251515,64.80642 -4.508673,3.8525 -10.735588,-6.2194 -16.533188,-5.808 -4.489803,0.3185 -7.636172,5.7797 -12.112396,6.2655 -5.152434,0.559 -9.879869,-4.3961 -15.050164,-4.066 -4.493939,0.2869 -8.076853,5.0762 -12.578149,5.1722 -4.822196,0.1028 -8.903453,-4.2416 -13.677721,-4.9617 -6.489307,-0.9788 -15.1515178,5.9929 -19.6454524,0.9765 -14.2159436,-15.8688 8.0865824,-46.7737 6.6754904,-65.00824 -1.7280703,-22.33068 -1.210964,-29.61106 6.765096,-41.60022 7.976059,-11.98915 18.994883,-19.4046 31.165941,-19.4046 12.171058,0 23.189882,7.41545 31.165941,19.4046 7.97606,11.98916 6.573083,25.92871 6.573087,44.22354 z" style="fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<circle class="ghost__eyes" id="path4152" r="5" cy="961.0423" cx="19.056681" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></circle>
<circle class="ghost__eyes" id="circle4156" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" cx="76.471283" cy="960.05237" r="5"></circle>
<path id="path4158" d="m 79.58852,970.29888 c -5e-6,2.4602 -14.18229,4.45458 -31.677023,4.45458 -17.494733,0 -31.677018,-1.99438 -31.677023,-4.45458 5e-6,-2.4602 14.380271,0.099 31.875004,0.099 17.494733,0 31.479037,-2.55919 31.479042,-0.099 z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<g class="ghost__eyes ghost__eyes--busted" id="g4167">
<rect id="rect4162" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="692.03461" y="658.58441" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"></rect>
<rect id="rect4165" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" y="-700.53461" x="665.08441" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
</g>
<g class="ghost__eyes ghost__eyes--busted" id="g4171" transform="translate(57.414617,-0.98990468)">
<rect id="rect4173" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" y="658.58441" x="692.03461" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
<rect id="rect4175" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="665.08441" y="-700.53461" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)"></rect>
</g>
</g>
</svg>
</div>
<div class="ghost__container" style="--speed: 2.067313322529108; --delay: 5; --color: #fff; --score: 1">
<input class="ghost" type="checkbox"/>
<div class="ghost__image">
<svg class="ghost__image-body" preserveAspectRatio="xMinYMin" viewBox="0 0 100 130">
<g id="layer1" transform="translate(0,-922.36216)">
<path class="ghost__path" id="path4149" d="m 87.104126,985.99028 c 3e-6,18.29482 23.310064,51.08502 7.251515,64.80642 -4.508673,3.8525 -10.735588,-6.2194 -16.533188,-5.808 -4.489803,0.3185 -7.636172,5.7797 -12.112396,6.2655 -5.152434,0.559 -9.879869,-4.3961 -15.050164,-4.066 -4.493939,0.2869 -8.076853,5.0762 -12.578149,5.1722 -4.822196,0.1028 -8.903453,-4.2416 -13.677721,-4.9617 -6.489307,-0.9788 -15.1515178,5.9929 -19.6454524,0.9765 -14.2159436,-15.8688 8.0865824,-46.7737 6.6754904,-65.00824 -1.7280703,-22.33068 -1.210964,-29.61106 6.765096,-41.60022 7.976059,-11.98915 18.994883,-19.4046 31.165941,-19.4046 12.171058,0 23.189882,7.41545 31.165941,19.4046 7.97606,11.98916 6.573083,25.92871 6.573087,44.22354 z" style="fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<circle class="ghost__eyes" id="path4152" r="5" cy="961.0423" cx="19.056681" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></circle>
<circle class="ghost__eyes" id="circle4156" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" cx="76.471283" cy="960.05237" r="5"></circle>
<path id="path4158" d="m 79.58852,970.29888 c -5e-6,2.4602 -14.18229,4.45458 -31.677023,4.45458 -17.494733,0 -31.677018,-1.99438 -31.677023,-4.45458 5e-6,-2.4602 14.380271,0.099 31.875004,0.099 17.494733,0 31.479037,-2.55919 31.479042,-0.099 z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<g class="ghost__eyes ghost__eyes--busted" id="g4167">
<rect id="rect4162" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="692.03461" y="658.58441" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"></rect>
<rect id="rect4165" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" y="-700.53461" x="665.08441" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
</g>
<g class="ghost__eyes ghost__eyes--busted" id="g4171" transform="translate(57.414617,-0.98990468)">
<rect id="rect4173" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" y="658.58441" x="692.03461" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
<rect id="rect4175" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="665.08441" y="-700.53461" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)"></rect>
</g>
</g>
</svg>
</div>
<div class="ghost__container" style="--speed: 3.4490763936640425; --delay: 1; --color: #fff; --score: 1">
<input class="ghost" type="checkbox"/>
<div class="ghost__image">
<svg class="ghost__image-body" viewBox="0 0 100 130" preserveAspectRatio="xMinYMin">
<g id="layer1" transform="translate(0,-922.36216)">
<path class="ghost__path" id="path4149" d="m 87.104126,985.99028 c 3e-6,18.29482 23.310064,51.08502 7.251515,64.80642 -4.508673,3.8525 -10.735588,-6.2194 -16.533188,-5.808 -4.489803,0.3185 -7.636172,5.7797 -12.112396,6.2655 -5.152434,0.559 -9.879869,-4.3961 -15.050164,-4.066 -4.493939,0.2869 -8.076853,5.0762 -12.578149,5.1722 -4.822196,0.1028 -8.903453,-4.2416 -13.677721,-4.9617 -6.489307,-0.9788 -15.1515178,5.9929 -19.6454524,0.9765 -14.2159436,-15.8688 8.0865824,-46.7737 6.6754904,-65.00824 -1.7280703,-22.33068 -1.210964,-29.61106 6.765096,-41.60022 7.976059,-11.98915 18.994883,-19.4046 31.165941,-19.4046 12.171058,0 23.189882,7.41545 31.165941,19.4046 7.97606,11.98916 6.573083,25.92871 6.573087,44.22354 z" style="fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<path id="path4158" d="m 64.541935,968.77294 c -10e-7,1.76535 -11.355147,5.78254 -17.039796,5.78254 -5.684647,0 -16.023096,-4.26665 -16.023098,-6.03199 2e-6,-1.76535 11.896477,3.67918 17.581124,3.67918 5.684648,0 15.481769,-5.19507 15.48177,-3.42973 z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<g class="ghost__eyes ghost__eyes--busted" id="g4171" transform="translate(18.907238,-4.0586249)">
<rect id="rect4173" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" y="658.58441" x="692.03461" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
<rect id="rect4175" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="665.08441" y="-700.53461" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)"></rect>
</g>
<g class="ghost__eyes ghost__eyes--busted" id="g4215" transform="translate(38.309414,-3.8606434)">
<rect id="rect4217" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="692.03461" y="658.58441" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"></rect>
<rect id="rect4219" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" y="-700.53461" x="665.08441" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
</g>
<path class="ghost__eyes" id="circle4221" d="m 62.069108,959.55738 c 0,2.70675 -2.194256,-3.01825 -4.901009,-3.01825 -2.706753,0 -4.901009,5.725 -4.901009,3.01825 0,-2.70675 2.194256,-4.90101 4.901009,-4.90101 2.706753,0 4.901009,2.19426 4.901009,4.90101 z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<path class="ghost__eyes" id="path4224" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 42.666932,959.55738 c 0,2.70675 -2.194256,-3.01825 -4.901009,-3.01825 -2.706753,0 -4.901009,5.725 -4.901009,3.01825 0,-2.70675 2.194256,-4.90101 4.901009,-4.90101 2.706753,0 4.901009,2.19426 4.901009,4.90101 z"></path>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="ghost-pen">
<div class="ghost__container" style="--speed: 2.0344343705400867; --delay: 4; --color: #fff; --score: 1">
<input class="ghost" type="checkbox"/>
<div class="ghost__image">
<svg class="ghost__image-body" viewBox="0 0 100 130" preserveAspectRatio="xMinYMin">
<g id="layer1" transform="translate(0,-922.36216)">
<path class="ghost__path" id="path4149" d="m 87.104126,985.99028 c 3e-6,18.29482 23.310064,51.08502 7.251515,64.80642 -4.508673,3.8525 -10.735588,-6.2194 -16.533188,-5.808 -4.489803,0.3185 -7.636172,5.7797 -12.112396,6.2655 -5.152434,0.559 -9.879869,-4.3961 -15.050164,-4.066 -4.493939,0.2869 -8.076853,5.0762 -12.578149,5.1722 -4.822196,0.1028 -8.903453,-4.2416 -13.677721,-4.9617 -6.489307,-0.9788 -15.1515178,5.9929 -19.6454524,0.9765 -14.2159436,-15.8688 8.0865824,-46.7737 6.6754904,-65.00824 -1.7280703,-22.33068 -1.210964,-29.61106 6.765096,-41.60022 7.976059,-11.98915 18.994883,-19.4046 31.165941,-19.4046 12.171058,0 23.189882,7.41545 31.165941,19.4046 7.97606,11.98916 6.573083,25.92871 6.573087,44.22354 z" style="fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<g class="ghost__eyes ghost__eyes--busted" id="g4171" transform="matrix(1.6637807,0,0,1.6637807,28.456943,-641.01528)">
<rect id="rect4173" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" y="658.58441" x="692.03461" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
<rect id="rect4175" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="665.08441" y="-700.53461" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)"></rect>
</g>
<circle class="ghost__eyes" id="path4245" r="7.5" cy="958.1463" cx="38.385101" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></circle>
<g class="ghost__eyes ghost__eyes--busted" id="g4247" transform="matrix(1.6637807,0,0,1.6637807,6.6789885,-640.81728)">
<rect id="rect4249" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="692.03461" y="658.58441" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"></rect>
<rect id="rect4251" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" y="-700.53461" x="665.08441" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
</g>
<circle class="ghost__eyes" id="circle4253" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" cx="60.163055" cy="957.9483" r="7.5"></circle>
</g>
</svg>
</div>
<div class="ghost__container" style="--speed: 3.372001430285218; --delay: 5; --color: #c5a3ff; --score: 5">
<input class="ghost" type="checkbox"/>
<div class="ghost__image">
<svg class="ghost__image-body" preserveAspectRatio="xMinYMin" viewBox="0 0 100 130">
<g id="layer1" transform="translate(0,-922.36216)">
<path class="ghost__path" id="path4149" d="m 87.104126,985.99028 c 3e-6,18.29482 23.310064,51.08502 7.251515,64.80642 -4.508673,3.8525 -10.735588,-6.2194 -16.533188,-5.808 -4.489803,0.3185 -7.636172,5.7797 -12.112396,6.2655 -5.152434,0.559 -9.879869,-4.3961 -15.050164,-4.066 -4.493939,0.2869 -8.076853,5.0762 -12.578149,5.1722 -4.822196,0.1028 -8.903453,-4.2416 -13.677721,-4.9617 -6.489307,-0.9788 -15.1515178,5.9929 -19.6454524,0.9765 -14.2159436,-15.8688 8.0865824,-46.7737 6.6754904,-65.00824 -1.7280703,-22.33068 -1.210964,-29.61106 6.765096,-41.60022 7.976059,-11.98915 18.994883,-19.4046 31.165941,-19.4046 12.171058,0 23.189882,7.41545 31.165941,19.4046 7.97606,11.98916 6.573083,25.92871 6.573087,44.22354 z" style="fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<circle class="ghost__eyes" id="path4152" r="5" cy="961.0423" cx="19.056681" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></circle>
<circle class="ghost__eyes" id="circle4156" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" cx="76.471283" cy="960.05237" r="5"></circle>
<path id="path4158" d="m 79.58852,970.29888 c -5e-6,2.4602 -14.18229,4.45458 -31.677023,4.45458 -17.494733,0 -31.677018,-1.99438 -31.677023,-4.45458 5e-6,-2.4602 14.380271,0.099 31.875004,0.099 17.494733,0 31.479037,-2.55919 31.479042,-0.099 z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<g class="ghost__eyes ghost__eyes--busted" id="g4167">
<rect id="rect4162" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="692.03461" y="658.58441" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"></rect>
<rect id="rect4165" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" y="-700.53461" x="665.08441" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
</g>
<g class="ghost__eyes ghost__eyes--busted" id="g4171" transform="translate(57.414617,-0.98990468)">
<rect id="rect4173" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" y="658.58441" x="692.03461" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
<rect id="rect4175" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="665.08441" y="-700.53461" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)"></rect>
</g>
</g>
</svg>
</div>
<div class="ghost__container" style="--speed: 1.9846881395221034; --delay: 4; --color: #fff; --score: 1">
<input class="ghost" type="checkbox"/>
<div class="ghost__image">
<svg class="ghost__image-body" preserveAspectRatio="xMinYMin" viewBox="0 0 100 130">
<g id="layer1" transform="translate(0,-922.36216)">
<path class="ghost__path" id="path4149" d="m 87.104126,985.99028 c 3e-6,18.29482 23.310064,51.08502 7.251515,64.80642 -4.508673,3.8525 -10.735588,-6.2194 -16.533188,-5.808 -4.489803,0.3185 -7.636172,5.7797 -12.112396,6.2655 -5.152434,0.559 -9.879869,-4.3961 -15.050164,-4.066 -4.493939,0.2869 -8.076853,5.0762 -12.578149,5.1722 -4.822196,0.1028 -8.903453,-4.2416 -13.677721,-4.9617 -6.489307,-0.9788 -15.1515178,5.9929 -19.6454524,0.9765 -14.2159436,-15.8688 8.0865824,-46.7737 6.6754904,-65.00824 -1.7280703,-22.33068 -1.210964,-29.61106 6.765096,-41.60022 7.976059,-11.98915 18.994883,-19.4046 31.165941,-19.4046 12.171058,0 23.189882,7.41545 31.165941,19.4046 7.97606,11.98916 6.573083,25.92871 6.573087,44.22354 z" style="fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<circle class="ghost__eyes" id="path4152" r="5" cy="961.0423" cx="19.056681" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></circle>
<circle class="ghost__eyes" id="circle4156" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" cx="76.471283" cy="960.05237" r="5"></circle>
<path id="path4158" d="m 79.58852,970.29888 c -5e-6,2.4602 -14.18229,4.45458 -31.677023,4.45458 -17.494733,0 -31.677018,-1.99438 -31.677023,-4.45458 5e-6,-2.4602 14.380271,0.099 31.875004,0.099 17.494733,0 31.479037,-2.55919 31.479042,-0.099 z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<g class="ghost__eyes ghost__eyes--busted" id="g4167">
<rect id="rect4162" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="692.03461" y="658.58441" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"></rect>
<rect id="rect4165" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" y="-700.53461" x="665.08441" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
</g>
<g class="ghost__eyes ghost__eyes--busted" id="g4171" transform="translate(57.414617,-0.98990468)">
<rect id="rect4173" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" y="658.58441" x="692.03461" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
<rect id="rect4175" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="665.08441" y="-700.53461" transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)"></rect>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="ghost-pen">
<div class="ghost__container" style="--speed: 1.0571415499516508; --delay: 4; --color: #fff; --score: 1">
<input class="ghost" type="checkbox"/>
<div class="ghost__image">
<svg class="ghost__image-body" viewBox="0 0 100 130" preserveAspectRatio="xMinYMin">
<g id="layer1" transform="translate(0,-922.36216)">
<path class="ghost__path" id="path4149" d="m 87.104126,985.99028 c 3e-6,18.29482 23.310064,51.08502 7.251515,64.80642 -4.508673,3.8525 -10.735588,-6.2194 -16.533188,-5.808 -4.489803,0.3185 -7.636172,5.7797 -12.112396,6.2655 -5.152434,0.559 -9.879869,-4.3961 -15.050164,-4.066 -4.493939,0.2869 -8.076853,5.0762 -12.578149,5.1722 -4.822196,0.1028 -8.903453,-4.2416 -13.677721,-4.9617 -6.489307,-0.9788 -15.1515178,5.9929 -19.6454524,0.9765 -14.2159436,-15.8688 8.0865824,-46.7737 6.6754904,-65.00824 -1.7280703,-22.33068 -1.210964,-29.61106 6.765096,-41.60022 7.976059,-11.98915 18.994883,-19.4046 31.165941,-19.4046 12.171058,0 23.189882,7.41545 31.165941,19.4046 7.97606,11.98916 6.573083,25.92871 6.573087,44.22354 z" style="fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<path id="path4158" d="m 64.541935,968.77294 c -10e-7,1.76535 -11.355147,5.78254 -17.039796,5.78254 -5.684647,0 -16.023096,-4.26665 -16.023098,-6.03199 2e-6,-1.76535 11.896477,3.67918 17.581124,3.67918 5.684648,0 15.481769,-5.19507 15.48177,-3.42973 z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
<g class="ghost__eyes ghost__eyes--busted" id="g4171" transform="translate(18.907238,-4.0586249)">
<rect id="rect4173" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" y="658.58441" x="692.03461" height="15" width="2" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></rect>
<rect id="rect4175" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="2" height="15" x="665.08441" y="-700.53461" transform=".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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