CodePen Embed - dot_e

<div class="space">

<div class="chara" ontouchstart="">
<ul class="mario mario_j">
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
</ul>

<ul class="mario mario_s">
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
</ul>
 </div>  
</div>

/********* 設定 *******/
body {
  background: #a0adfe;
}

:root {
  /*肌色*/
--Hada: #facd89;
--None: none;
}

.mario{
/*マリオ服*/ 
--Fuku: #ff0000;
/*マリオ他*/
--Hoka: #638c0b;  
}

.mario,
.luigi {
  font-size: 0;
  margin: 0;
  padding: 0;
  display: block;
}

img {
  background: #eee;
  width: 10px;
  height: 10px;
}

/********* ジャンプ *******/
.space {
  width: 100%;
  height: 400px;
  position: relative;
  background: #a0adfe;
  border-bottom: 30px solid #DF7D00;
}

.chara {
  position: absolute;
  bottom:0;
  left: 25%;
}

.chara_jump {
  animation-duration: 0.8s;
  animation-name: jump;
  animation-timing-function: ease-in;
}

@keyframes jump {
  from {
    bottom:0;
  }
  45% {
    bottom: 150px;
  }
  55% {
    bottom: 150px;
  }
  to {
    bottom: 0;
  }
}


/********* マリオ（ジャンプ） *******/
/*1行目*/
.mario_j li:nth-child(1) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(5) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(6) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(7) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(8) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(9) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(10) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(11) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(12) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(13) {background: var(--None);}
.mario_j li:nth-child(1) img:nth-child(14) {background: var(--Hada);}
.mario_j li:nth-child(1) img:nth-child(15) {background: var(--Hada);}
.mario_j li:nth-child(1) img:nth-child(16) {background: var(--Hada);}

/*2行目*/
.mario_j li:nth-child(2) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(2) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(2) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(2) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(2) img:nth-child(5) {background: var(--None);}
.mario_j li:nth-child(2) img:nth-child(6) {background: var(--None);}
.mario_j li:nth-child(2) img:nth-child(7) {background: var(--Fuku);}
.mario_j li:nth-child(2) img:nth-child(8) {background: var(--Fuku);}
.mario_j li:nth-child(2) img:nth-child(9) {background: var(--Fuku);}
.mario_j li:nth-child(2) img:nth-child(10) {background: var(--Fuku);}
.mario_j li:nth-child(2) img:nth-child(11) {background: var(--Fuku);}
.mario_j li:nth-child(2) img:nth-child(12) {background: var(--None);}
.mario_j li:nth-child(2) img:nth-child(13) {background: var(--None);}
.mario_j li:nth-child(2) img:nth-child(14) {background: var(--Hada);}
.mario_j li:nth-child(2) img:nth-child(15) {background: var(--Hada);}
.mario_j li:nth-child(2) img:nth-child(16) {background: var(--Hada);}


/*3行目*/
.mario_j li:nth-child(3) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(3) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(3) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(3) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(3) img:nth-child(5) {background: var(--None);}
.mario_j li:nth-child(3) img:nth-child(6) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(7) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(8) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(9) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(10) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(11) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(12) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(13) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(14) {background: var(--Fuku);}
.mario_j li:nth-child(3) img:nth-child(15) {background: var(--Hada);}
.mario_j li:nth-child(3) img:nth-child(16) {background: var(--Hada);}


/*4行目*/
.mario_j li:nth-child(4) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(4) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(4) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(4) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(4) img:nth-child(5) {background: var(--None);}
.mario_j li:nth-child(4) img:nth-child(6) {background: var(--Hoka);}
.mario_j li:nth-child(4) img:nth-child(7) {background: var(--Hoka);}
.mario_j li:nth-child(4) img:nth-child(8) {background: var(--Hoka);}
.mario_j li:nth-child(4) img:nth-child(9) {background: var(--Hada);}
.mario_j li:nth-child(4) img:nth-child(10) {background: var(--Hada);}
.mario_j li:nth-child(4) img:nth-child(11) {background: var(--Hoka);}
.mario_j li:nth-child(4) img:nth-child(12) {background: var(--Hada);}
.mario_j li:nth-child(4) img:nth-child(13) {background: var(--None);}
.mario_j li:nth-child(4) img:nth-child(14) {background: var(--Hoka);}
.mario_j li:nth-child(4) img:nth-child(15) {background: var(--Hoka);}
.mario_j li:nth-child(4) img:nth-child(16) {background: var(--Hoka);}


/*5行目*/
.mario_j li:nth-child(5) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(5) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(5) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(5) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(5) img:nth-child(5) {background: var(--Hoka);}
.mario_j li:nth-child(5) img:nth-child(6) {background: var(--Hada);}
.mario_j li:nth-child(5) img:nth-child(7) {background: var(--Hoka);}
.mario_j li:nth-child(5) img:nth-child(8) {background: var(--Hada);}
.mario_j li:nth-child(5) img:nth-child(9) {background: var(--Hada);}
.mario_j li:nth-child(5) img:nth-child(10) {background: var(--Hada);}
.mario_j li:nth-child(5) img:nth-child(11) {background: var(--Hoka);}
.mario_j li:nth-child(5) img:nth-child(12) {background: var(--Hada);}
.mario_j li:nth-child(5) img:nth-child(13) {background: var(--Hada);}
.mario_j li:nth-child(5) img:nth-child(14) {background: var(--Hada);}
.mario_j li:nth-child(5) img:nth-child(15) {background: var(--Hoka);}
.mario_j li:nth-child(5) img:nth-child(16) {background: var(--Hoka);}


/*6行目*/
.mario_j li:nth-child(6) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(6) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(6) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(6) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(6) img:nth-child(5) {background: var(--Hoka);}
.mario_j li:nth-child(6) img:nth-child(6) {background: var(--Hada);}
.mario_j li:nth-child(6) img:nth-child(7) {background: var(--Hoka);}
.mario_j li:nth-child(6) img:nth-child(8) {background: var(--Hoka);}
.mario_j li:nth-child(6) img:nth-child(9) {background: var(--Hada);}
.mario_j li:nth-child(6) img:nth-child(10) {background: var(--Hada);}
.mario_j li:nth-child(6) img:nth-child(11) {background: var(--Hada);}
.mario_j li:nth-child(6) img:nth-child(12) {background: var(--Hoka);}
.mario_j li:nth-child(6) img:nth-child(13) {background: var(--Hada);}
.mario_j li:nth-child(6) img:nth-child(14) {background: var(--Hada);}
.mario_j li:nth-child(6) img:nth-child(15) {background: var(--Hada);}
.mario_j li:nth-child(6) img:nth-child(16) {background: var(--Hoka);}


/*7行目*/
.mario_j li:nth-child(7) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(7) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(7) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(7) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(7) img:nth-child(5) {background: var(--Hoka);}
.mario_j li:nth-child(7) img:nth-child(6) {background: var(--Hoka);}
.mario_j li:nth-child(7) img:nth-child(7) {background: var(--Hada);}
.mario_j li:nth-child(7) img:nth-child(8) {background: var(--Hada);}
.mario_j li:nth-child(7) img:nth-child(9) {background: var(--Hada);}
.mario_j li:nth-child(7) img:nth-child(10) {background: var(--Hada);}
.mario_j li:nth-child(7) img:nth-child(11) {background: var(--Hoka);}
.mario_j li:nth-child(7) img:nth-child(12) {background: var(--Hoka);}
.mario_j li:nth-child(7) img:nth-child(13) {background: var(--Hoka);}
.mario_j li:nth-child(7) img:nth-child(14) {background: var(--Hoka);}
.mario_j li:nth-child(7) img:nth-child(15) {background: var(--Hoka);}
.mario_j li:nth-child(7) img:nth-child(16) {background: var(--None);}


/*8行目*/
.mario_j li:nth-child(8) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(8) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(8) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(8) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(8) img:nth-child(5) {background: var(--None);}
.mario_j li:nth-child(8) img:nth-child(6) {background: var(--None);}
.mario_j li:nth-child(8) img:nth-child(7) {background: var(--Hada);}
.mario_j li:nth-child(8) img:nth-child(8) {background: var(--Hada);}
.mario_j li:nth-child(8) img:nth-child(9) {background: var(--Hada);}
.mario_j li:nth-child(8) img:nth-child(10) {background: var(--Hada);}
.mario_j li:nth-child(8) img:nth-child(11) {background: var(--Hada);}
.mario_j li:nth-child(8) img:nth-child(12) {background: var(--Hada);}
.mario_j li:nth-child(8) img:nth-child(13) {background: var(--Hada);}
.mario_j li:nth-child(8) img:nth-child(14) {background: var(--Hoka);}
.mario_j li:nth-child(8) img:nth-child(15) {background: var(--None);}
.mario_j li:nth-child(8) img:nth-child(16) {background: var(--None);}


/*9行目*/
.mario_j li:nth-child(9) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(9) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(9) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(9) img:nth-child(4) {background: var(--Hoka);}
.mario_j li:nth-child(9) img:nth-child(5) {background: var(--Hoka);}
.mario_j li:nth-child(9) img:nth-child(6) {background: var(--Hoka);}
.mario_j li:nth-child(9) img:nth-child(7) {background: var(--Hoka);}
.mario_j li:nth-child(9) img:nth-child(8) {background: var(--Fuku);}
.mario_j li:nth-child(9) img:nth-child(9) {background: var(--Hoka);}
.mario_j li:nth-child(9) img:nth-child(10) {background: var(--Hoka);}
.mario_j li:nth-child(9) img:nth-child(11) {background: var(--Hoka);}
.mario_j li:nth-child(9) img:nth-child(12) {background: var(--Fuku);}
.mario_j li:nth-child(9) img:nth-child(13) {background: var(--Hoka);}
.mario_j li:nth-child(9) img:nth-child(14) {background: var(--None);}
.mario_j li:nth-child(9) img:nth-child(15) {background: var(--None);}
.mario_j li:nth-child(9) img:nth-child(16) {background: var(--None);}


/*10行目*/
.mario_j li:nth-child(10) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(10) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(10) img:nth-child(3) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(4) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(5) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(6) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(7) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(8) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(9) {background: var(--Fuku);}
.mario_j li:nth-child(10) img:nth-child(10) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(11) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(12) {background: var(--Hoka);}
.mario_j li:nth-child(10) img:nth-child(13) {background: var(--Fuku);}
.mario_j li:nth-child(10) img:nth-child(14) {background: var(--None);}
.mario_j li:nth-child(10) img:nth-child(15) {background: var(--None);}
.mario_j li:nth-child(10) img:nth-child(16) {background: var(--Hoka);}


/*11行目*/
.mario_j li:nth-child(11) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(11) img:nth-child(2) {background: var(--Hada);}
.mario_j li:nth-child(11) img:nth-child(3) {background: var(--Hada);}
.mario_j li:nth-child(11) img:nth-child(4) {background: var(--Hoka);}
.mario_j li:nth-child(11) img:nth-child(5) {background: var(--Hoka);}
.mario_j li:nth-child(11) img:nth-child(6) {background: var(--Hoka);}
.mario_j li:nth-child(11) img:nth-child(7) {background: var(--Hoka);}
.mario_j li:nth-child(11) img:nth-child(8) {background: var(--Hoka);}
.mario_j li:nth-child(11) img:nth-child(9) {background: var(--Fuku);}
.mario_j li:nth-child(11) img:nth-child(10) {background: var(--Hoka);}
.mario_j li:nth-child(11) img:nth-child(11) {background: var(--Hoka);}
.mario_j li:nth-child(11) img:nth-child(12) {background: var(--Hoka);}
.mario_j li:nth-child(11) img:nth-child(13) {background: var(--Fuku);}
.mario_j li:nth-child(11) img:nth-child(14) {background: var(--None);}
.mario_j li:nth-child(11) img:nth-child(15) {background: var(--None);}
.mario_j li:nth-child(11) img:nth-child(16) {background: var(--Hoka);}


/*12行目*/
.mario_j li:nth-child(12) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(12) img:nth-child(2) {background: var(--Hada);}
.mario_j li:nth-child(12) img:nth-child(3) {background: var(--Hada);}
.mario_j li:nth-child(12) img:nth-child(4) {background: var(--Hada);}
.mario_j li:nth-child(12) img:nth-child(5) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(6) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(7) {background: var(--Hoka);}
.mario_j li:nth-child(12) img:nth-child(8) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(9) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(10) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(11) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(12) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(13) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(14) {background: var(--Fuku);}
.mario_j li:nth-child(12) img:nth-child(15) {background: var(--Hoka);}
.mario_j li:nth-child(12) img:nth-child(16) {background: var(--Hoka);}


/*13行目*/
.mario_j li:nth-child(13) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(13) img:nth-child(2) {background: var(--Hada);}
.mario_j li:nth-child(13) img:nth-child(3) {background: var(--Hada);}
.mario_j li:nth-child(13) img:nth-child(4) {background: var(--None);}
.mario_j li:nth-child(13) img:nth-child(5) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(6) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(7) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(8) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(9) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(10) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(11) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(12) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(13) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(14) {background: var(--Fuku);}
.mario_j li:nth-child(13) img:nth-child(15) {background: var(--Hoka);}
.mario_j li:nth-child(13) img:nth-child(16) {background: var(--Hoka);}


/*14行目*/
.mario_j li:nth-child(14) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(14) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(14) img:nth-child(3) {background: var(--None);}
.mario_j li:nth-child(14) img:nth-child(4) {background: var(--Hoka);}
.mario_j li:nth-child(14) img:nth-child(5) {background: var(--Hoka);}
.mario_j li:nth-child(14) img:nth-child(6) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(7) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(8) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(9) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(10) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(11) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(12) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(13) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(14) {background: var(--Fuku);}
.mario_j li:nth-child(14) img:nth-child(15) {background: var(--Hoka);}
.mario_j li:nth-child(14) img:nth-child(16) {background: var(--Hoka);}


/*15行目*/
.mario_j li:nth-child(15) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(15) img:nth-child(2) {background: var(--None);}
.mario_j li:nth-child(15) img:nth-child(3) {background: var(--Hoka);}
.mario_j li:nth-child(15) img:nth-child(4) {background: var(--Hoka);}
.mario_j li:nth-child(15) img:nth-child(5) {background: var(--Fuku);}
.mario_j li:nth-child(15) img:nth-child(6) {background: var(--Fuku);}
.mario_j li:nth-child(15) img:nth-child(7) {background: var(--Fuku);}
.mario_j li:nth-child(15) img:nth-child(8) {background: var(--Fuku);}
.mario_j li:nth-child(15) img:nth-child(9) {background: var(--Fuku);}
.mario_j li:nth-child(15) img:nth-child(10) {background: var(--Fuku);}
.mario_j li:nth-child(15) img:nth-child(11) {background: var(--Fuku);}
.mario_j li:nth-child(15) img:nth-child(12) {background: var(--None);}
.mario_j li:nth-child(15) img:nth-child(13) {background: var(--None);}
.mario_j li:nth-child(15) img:nth-child(14) {background: var(--None);}
.mario_j li:nth-child(15) img:nth-child(15) {background: var(--None);}
.mario_j li:nth-child(15) img:nth-child(16) {background: var(--None);}


/*16行目*/
.mario_j li:nth-child(16) img:nth-child(1) {background: var(--None);}
.mario_j li:nth-child(16) img:nth-child(2) {background: var(--Hoka);}
.mario_j li:nth-child(16) img:nth-child(3) {background: var(--Hoka);}
.mario_j li:nth-child(16) img:nth-child(4) {background: var(--Hoka);}
.mario_j li:nth-child(16) img:nth-child(5) {background: var(--Fuku);}
.mario_j li:nth-child(16) img:nth-child(6) {background: var(--Fuku);}
.mario_j li:nth-child(16) img:nth-child(7) {background: var(--Fuku);}
.mario_j li:nth-child(16) img:nth-child(8) {background: var(--Fuku);}
.mario_j li:nth-child(16) img:nth-child(9) {background: var(--None);}
.mario_j li:nth-child(16) img:nth-child(10) {background: var(--None);}
.mario_j li:nth-child(16) img:nth-child(11) {background: var(--None);}
.mario_j li:nth-child(16) img:nth-child(12) {background: var(--None);}
.mario_j li:nth-child(16) img:nth-child(13) {background: var(--None);}
.mario_j li:nth-child(16) img:nth-child(14) {background: var(--None);}
.mario_j li:nth-child(16) img:nth-child(15) {background: var(--None);}
.mario_j li:nth-child(16) img:nth-child(16) {background: var(--None);}




/********* マリオ（スタンド） *******/
/*1行目*/
.mario_s li:nth-child(1) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(4) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(5) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(6) {background: var(--Fuku);}
.mario_s li:nth-child(1) img:nth-child(7) {background: var(--Fuku);}
.mario_s li:nth-child(1) img:nth-child(8) {background: var(--Fuku);}
.mario_s li:nth-child(1) img:nth-child(9) {background: var(--Fuku);}
.mario_s li:nth-child(1) img:nth-child(10) {background: var(--Fuku);}
.mario_s li:nth-child(1) img:nth-child(11) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(12) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(13) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(16) {background: var(--None);}

/*2行目*/
.mario_s li:nth-child(2) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(2) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(2) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(2) img:nth-child(4) {background: var(--None);}
.mario_s li:nth-child(2) img:nth-child(5) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(6) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(7) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(8) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(9) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(10) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(11) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(12) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(13) {background: var(--Fuku);}
.mario_s li:nth-child(2) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(2) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(2) img:nth-child(16) {background: var(--None);}


/*3行目*/
.mario_s li:nth-child(3) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(3) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(3) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(3) img:nth-child(4) {background: var(--None);}
.mario_s li:nth-child(3) img:nth-child(5) {background: var(--Hoka);}
.mario_s li:nth-child(3) img:nth-child(6) {background: var(--Hoka);}
.mario_s li:nth-child(3) img:nth-child(7) {background: var(--Hoka);}
.mario_s li:nth-child(3) img:nth-child(8) {background: var(--Hada);}
.mario_s li:nth-child(3) img:nth-child(9) {background: var(--Hada);}
.mario_s li:nth-child(3) img:nth-child(10) {background: var(--Hoka);}
.mario_s li:nth-child(3) img:nth-child(11) {background: var(--Hada);}
.mario_s li:nth-child(3) img:nth-child(12) {background: var(--None);}
.mario_s li:nth-child(3) img:nth-child(13) {background: var(--None);}
.mario_s li:nth-child(3) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(3) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(3) img:nth-child(16) {background: var(--None);}


/*4行目*/
.mario_s li:nth-child(4) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(4) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(4) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(4) img:nth-child(4) {background: var(--Hoka);}
.mario_s li:nth-child(4) img:nth-child(5) {background: var(--Hada);}
.mario_s li:nth-child(4) img:nth-child(6) {background: var(--Hoka);}
.mario_s li:nth-child(4) img:nth-child(7) {background: var(--Hada);}
.mario_s li:nth-child(4) img:nth-child(8) {background: var(--Hada);}
.mario_s li:nth-child(4) img:nth-child(9) {background: var(--Hada);}
.mario_s li:nth-child(4) img:nth-child(10) {background: var(--Hoka);}
.mario_s li:nth-child(4) img:nth-child(11) {background: var(--Hada);}
.mario_s li:nth-child(4) img:nth-child(12) {background: var(--Hada);}
.mario_s li:nth-child(4) img:nth-child(13) {background: var(--Hada);}
.mario_s li:nth-child(4) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(4) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(4) img:nth-child(16) {background: var(--None);}


/*5行目*/
.mario_s li:nth-child(5) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(5) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(5) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(5) img:nth-child(4) {background: var(--Hoka);}
.mario_s li:nth-child(5) img:nth-child(5) {background: var(--Hada);}
.mario_s li:nth-child(5) img:nth-child(6) {background: var(--Hoka);}
.mario_s li:nth-child(5) img:nth-child(7) {background: var(--Hoka);}
.mario_s li:nth-child(5) img:nth-child(8) {background: var(--Hada);}
.mario_s li:nth-child(5) img:nth-child(9) {background: var(--Hada);}
.mario_s li:nth-child(5) img:nth-child(10) {background: var(--Hada);}
.mario_s li:nth-child(5) img:nth-child(11) {background: var(--Hoka);}
.mario_s li:nth-child(5) img:nth-child(12) {background: var(--Hada);}
.mario_s li:nth-child(5) img:nth-child(13) {background: var(--Hada);}
.mario_s li:nth-child(5) img:nth-child(14) {background: var(--Hada);}
.mario_s li:nth-child(5) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(5) img:nth-child(16) {background: var(--None);}


/*6行目*/
.mario_s li:nth-child(6) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(6) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(6) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(6) img:nth-child(4) {background: var(--Hoka);}
.mario_s li:nth-child(6) img:nth-child(5) {background: var(--Hoka);}
.mario_s li:nth-child(6) img:nth-child(6) {background: var(--Hada);}
.mario_s li:nth-child(6) img:nth-child(7) {background: var(--Hada);}
.mario_s li:nth-child(6) img:nth-child(8) {background: var(--Hada);}
.mario_s li:nth-child(6) img:nth-child(9) {background: var(--Hada);}
.mario_s li:nth-child(6) img:nth-child(10) {background: var(--Hoka);}
.mario_s li:nth-child(6) img:nth-child(11) {background: var(--Hoka);}
.mario_s li:nth-child(6) img:nth-child(12) {background: var(--Hoka);}
.mario_s li:nth-child(6) img:nth-child(13) {background: var(--Hoka);}
.mario_s li:nth-child(6) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(6) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(6) img:nth-child(16) {background: var(--None);}


/*7行目*/
.mario_s li:nth-child(7) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(7) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(7) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(7) img:nth-child(4) {background: var(--None);}
.mario_s li:nth-child(7) img:nth-child(5) {background: var(--None);}
.mario_s li:nth-child(7) img:nth-child(6) {background: var(--Hada);}
.mario_s li:nth-child(7) img:nth-child(7) {background: var(--Hada);}
.mario_s li:nth-child(7) img:nth-child(8) {background: var(--Hada);}
.mario_s li:nth-child(7) img:nth-child(9) {background: var(--Hada);}
.mario_s li:nth-child(7) img:nth-child(10) {background: var(--Hada);}
.mario_s li:nth-child(7) img:nth-child(11) {background: var(--Hada);}
.mario_s li:nth-child(7) img:nth-child(12) {background: var(--Hada);}
.mario_s li:nth-child(7) img:nth-child(13) {background: var(--None);}
.mario_s li:nth-child(7) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(7) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(7) img:nth-child(16) {background: var(--None);}


/*8行目*/
.mario_s li:nth-child(8) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(4) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(5) {background: var(--Hoka);}
.mario_s li:nth-child(8) img:nth-child(6) {background: var(--Hoka);}
.mario_s li:nth-child(8) img:nth-child(7) {background: var(--Fuku);}
.mario_s li:nth-child(8) img:nth-child(8) {background: var(--Hoka);}
.mario_s li:nth-child(8) img:nth-child(9) {background: var(--Hoka);}
.mario_s li:nth-child(8) img:nth-child(10) {background: var(--Hoka);}
.mario_s li:nth-child(8) img:nth-child(11) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(12) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(13) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(8) img:nth-child(16) {background: var(--None);}


/*9行目*/
.mario_s li:nth-child(9) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(9) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(9) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(9) img:nth-child(4) {background: var(--Hoka);}
.mario_s li:nth-child(9) img:nth-child(5) {background: var(--Hoka);}
.mario_s li:nth-child(9) img:nth-child(6) {background: var(--Hoka);}
.mario_s li:nth-child(9) img:nth-child(7) {background: var(--Fuku);}
.mario_s li:nth-child(9) img:nth-child(8) {background: var(--Hoka);}
.mario_s li:nth-child(9) img:nth-child(9) {background: var(--Hoka);}
.mario_s li:nth-child(9) img:nth-child(10) {background: var(--Fuku);}
.mario_s li:nth-child(9) img:nth-child(11) {background: var(--Hoka);}
.mario_s li:nth-child(9) img:nth-child(12) {background: var(--Hoka);}
.mario_s li:nth-child(9) img:nth-child(13) {background: var(--Hoka);}
.mario_s li:nth-child(9) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(9) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(9) img:nth-child(16) {background: var(--None);}


/*10行目*/
.mario_s li:nth-child(10) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(10) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(10) img:nth-child(3) {background: var(--Hoka);}
.mario_s li:nth-child(10) img:nth-child(4) {background: var(--Hoka);}
.mario_s li:nth-child(10) img:nth-child(5) {background: var(--Hoka);}
.mario_s li:nth-child(10) img:nth-child(6) {background: var(--Hoka);}
.mario_s li:nth-child(10) img:nth-child(7) {background: var(--Fuku);}
.mario_s li:nth-child(10) img:nth-child(8) {background: var(--Fuku);}
.mario_s li:nth-child(10) img:nth-child(9) {background: var(--Fuku);}
.mario_s li:nth-child(10) img:nth-child(10) {background: var(--Fuku);}
.mario_s li:nth-child(10) img:nth-child(11) {background: var(--Hoka);}
.mario_s li:nth-child(10) img:nth-child(12) {background: var(--Hoka);}
.mario_s li:nth-child(10) img:nth-child(13) {background: var(--Hoka);}
.mario_s li:nth-child(10) img:nth-child(14) {background: var(--Hoka);}
.mario_s li:nth-child(10) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(10) img:nth-child(16) {background: var(--None);}


/*11行目*/
.mario_s li:nth-child(11) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(11) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(11) img:nth-child(3) {background: var(--Hada);}
.mario_s li:nth-child(11) img:nth-child(4) {background: var(--Hada);}
.mario_s li:nth-child(11) img:nth-child(5) {background: var(--Hoka);}
.mario_s li:nth-child(11) img:nth-child(6) {background: var(--Fuku);}
.mario_s li:nth-child(11) img:nth-child(7) {background: var(--Hada);}
.mario_s li:nth-child(11) img:nth-child(8) {background: var(--Fuku);}
.mario_s li:nth-child(11) img:nth-child(9) {background: var(--Fuku);}
.mario_s li:nth-child(11) img:nth-child(10) {background: var(--Hada);}
.mario_s li:nth-child(11) img:nth-child(11) {background: var(--Fuku);}
.mario_s li:nth-child(11) img:nth-child(12) {background: var(--Hoka);}
.mario_s li:nth-child(11) img:nth-child(13) {background: var(--Hada);}
.mario_s li:nth-child(11) img:nth-child(14) {background: var(--Hada);}
.mario_s li:nth-child(11) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(11) img:nth-child(16) {background: var(--None);}


/*12行目*/
.mario_s li:nth-child(12) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(12) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(12) img:nth-child(3) {background: var(--Hada);}
.mario_s li:nth-child(12) img:nth-child(4) {background: var(--Hada);}
.mario_s li:nth-child(12) img:nth-child(5) {background: var(--Hada);}
.mario_s li:nth-child(12) img:nth-child(6) {background: var(--Fuku);}
.mario_s li:nth-child(12) img:nth-child(7) {background: var(--Fuku);}
.mario_s li:nth-child(12) img:nth-child(8) {background: var(--Fuku);}
.mario_s li:nth-child(12) img:nth-child(9) {background: var(--Fuku);}
.mario_s li:nth-child(12) img:nth-child(10) {background: var(--Fuku);}
.mario_s li:nth-child(12) img:nth-child(11) {background: var(--Fuku);}
.mario_s li:nth-child(12) img:nth-child(12) {background: var(--Hada);}
.mario_s li:nth-child(12) img:nth-child(13) {background: var(--Hada);}
.mario_s li:nth-child(12) img:nth-child(14) {background: var(--Hada);}
.mario_s li:nth-child(12) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(12) img:nth-child(16) {background: var(--None);}


/*13行目*/
.mario_s li:nth-child(13) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(13) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(13) img:nth-child(3) {background: var(--Hada);}
.mario_s li:nth-child(13) img:nth-child(4) {background: var(--Hada);}
.mario_s li:nth-child(13) img:nth-child(5) {background: var(--Fuku);}
.mario_s li:nth-child(13) img:nth-child(6) {background: var(--Fuku);}
.mario_s li:nth-child(13) img:nth-child(7) {background: var(--Fuku);}
.mario_s li:nth-child(13) img:nth-child(8) {background: var(--Fuku);}
.mario_s li:nth-child(13) img:nth-child(9) {background: var(--Fuku);}
.mario_s li:nth-child(13) img:nth-child(10) {background: var(--Fuku);}
.mario_s li:nth-child(13) img:nth-child(11) {background: var(--Fuku);}
.mario_s li:nth-child(13) img:nth-child(12) {background: var(--Fuku);}
.mario_s li:nth-child(13) img:nth-child(13) {background: var(--Hada);}
.mario_s li:nth-child(13) img:nth-child(14) {background: var(--Hada);}
.mario_s li:nth-child(13) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(13) img:nth-child(16) {background: var(--None);}


/*14行目*/
.mario_s li:nth-child(14) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(4) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(5) {background: var(--Fuku);}
.mario_s li:nth-child(14) img:nth-child(6) {background: var(--Fuku);}
.mario_s li:nth-child(14) img:nth-child(7) {background: var(--Fuku);}
.mario_s li:nth-child(14) img:nth-child(8) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(9) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(10) {background: var(--Fuku);}
.mario_s li:nth-child(14) img:nth-child(11) {background: var(--Fuku);}
.mario_s li:nth-child(14) img:nth-child(12) {background: var(--Fuku);}
.mario_s li:nth-child(14) img:nth-child(13) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(14) img:nth-child(16) {background: var(--None);}


/*15行目*/
.mario_s li:nth-child(15) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(4) {background: var(--Hoka);}
.mario_s li:nth-child(15) img:nth-child(5) {background: var(--Hoka);}
.mario_s li:nth-child(15) img:nth-child(6) {background: var(--Hoka);}
.mario_s li:nth-child(15) img:nth-child(7) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(8) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(9) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(10) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(11) {background: var(--Hoka);}
.mario_s li:nth-child(15) img:nth-child(12) {background: var(--Hoka);}
.mario_s li:nth-child(15) img:nth-child(13) {background: var(--Hoka);}
.mario_s li:nth-child(15) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(15) img:nth-child(16) {background: var(--None);}


/*16行目*/
.mario_s li:nth-child(16) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(16) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(16) img:nth-child(3) {background: var(--Hoka);}
.mario_s li:nth-child(16) img:nth-child(4) {background: var(--Hoka);}
.mario_s li:nth-child(16) img:nth-child(5) {background: var(--Hoka);}
.mario_s li:nth-child(16) img:nth-child(6) {background: var(--Hoka);}
.mario_s li:nth-child(16) img:nth-child(7) {background: var(--None);}
.mario_s li:nth-child(16) img:nth-child(8) {background: var(--None);}
.mario_s li:nth-child(16) img:nth-child(9) {background: var(--None);}
.mario_s li:nth-child(16) img:nth-child(10) {background: var(--None);}
.mario_s li:nth-child(16) img:nth-child(11) {background: var(--Hoka);}
.mario_s li:nth-child(16) img:nth-child(12) {background: var(--Hoka);}
.mario_s li:nth-child(16) img:nth-child(13) {background: var(--Hoka);}
.mario_s li:nth-child(16) img:nth-child(14) {background: var(--Hoka);}
.mario_s li:nth-child(16) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(16) img:nth-child(16) {background: var(--None);}

chara = document.querySelector(".chara");
mario_j = document.querySelector(".mario_j");
mario_s = document.querySelector(".mario_s");

//ページ読み込み時
mario_j.style.display="none";

 //イベント（ジャンプ）
chara.addEventListener('click', function() {
    chara.classList.add('chara_jump');
    mario_j.style.display="block";
    mario_s.style.display="none";
 }, false);

//イベント（着地後）
chara.addEventListener('animationend', function() {
    chara.classList.remove('chara_jump');
    mario_j.style.display="none";
    mario_s.style.display="block";
}, false);

This Pen is owned by イイダリョウ on CodePen.

See more by @i_ryo on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdn.jsdelivr.net/npm/[email protected]/ie11CustomProperties.min.js