Front End/CSS

[CSS] Sprite(스프라이트) Image로 Mostion 만들기

TTOWA 2021. 10. 6. 14:34

1. CSS Ketframes로 이미지 모션 만들기

  • 한장씩 제작된 이미지가 아닌 한장으로 만들어진 스프라이트 이미지로 모션 구현(모션용 제작 이미지 필요)
  • img 내 position 변경

2. 소스 및 스프라이트 이미지 (Result 탭 에서 확인가능)

 

가로&세로 혼합된 스프라이트 이미지

 

가로로 긴 스프라이트 이미지

3. 스프라이트 이미지 장,단점

  • 서버에 요청을 한 번만 함 (장점)
  • 하나의 이미지 파일만 관리 (장점)
  • 이미지가 크다면 로딩시 오래 걸림 (단점)

 

이 글이 도움이 되었다면 ♡(공감)를 눌러 주세요.

반응형