비전공자 개발일기

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

'HTML _CSS' 카테고리의 다른 글

FILP CARD  (0) 2022.05.20
Isometric Menu Hover Effects  (0) 2022.05.19
Image Animation Sequence  (0) 2022.05.13
Nine Dots Menu  (0) 2022.05.11
3D BUTTON  (0) 2022.05.09
'HTML _CSS' Related Articles more