Sprite Animation

HTML _CSS

Sprite Animation

HiroDaegu 2022. 5. 18. 00:13

728x90

SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SPRITE ANIMATION</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="scene">
    <input type="checkbox" checked>
    <div class="mario"></div>
  </div>
</body>
</html>

.scene {
  width: 230px;
  height: 200px;
  background:url('./background.jpg') 0 90% no-repeat;
  background-size: cover;
  background-size: 500% 400%;
  border-radius: 20%;
  position: relative;
  overflow: hidden;
  transition: background-position 15s linear;
}

.scene:hover {
  background-position: 150% 90%;
}

.mario {
  width: 65px;
  height: 100px;
  background: url("./mario_sprite.png") no-repeat;
  transform: translate(10px, 85px);
  animation: run .5s infinite;
}

input[type='checkbox'] {
  display: none;
}

input:checked + .mario {
  animation-timing-function: step-end;
}

@keyframes run {
  25% {
    background-position: -85px 0;
  }
  50% {
    width: 45px;
    background-position: -150px 0;
  }
  75% {
    width: 55px;
    background-position: -197px 0;
  }
}

728x90

LIST