纯css+div实现万圣节捉鬼游戏代码

代码语言:html

所属分类:游戏

代码描述:纯css+div实现万圣节捉鬼游戏代码,没有一行js代码,全部是css+div+svg实现,当鬼出洞时,点击抓住它。

代码标签: css div 万圣节 捉鬼 游戏 代码

下面为部分代码预览,完整代码请点击下载或在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&amp;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>
   .........完整代码请登录后点击上方下载按钮下载查看

网友评论0