카테고리

질문 & 답변
세부 분야

웹 개발
해결 여부

미해결

이미지 없으신분 제 코드를 보세요 ㅎㅎ

23.06.21 03:59 작성 23.06.21 04:08 수정 조회수 390

이미지 없으신 분들 그냥 구글 이미지에서 간단히 가져와서 사용해 봤습니다.

요걸로 테스트 해 봅시다

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <style>
    @keyframes break-egg-ani {
      /* 0%는 from */
      /* 100% 은 to*/
      to {
        background-position: -500px 0;
      }
    }
    .broken-egg {
      width: 85px;
      height: 150px;
      background: url("https://www.shutterstock.com/image-vector/cartoon-dragon-ice-crystal-eggs-260nw-2152129871.jpg")
        no-repeat 0 0 / auto 150px;
      animation: break-egg-ani 2s infinite steps(7);
    }
  </style>
  <body>
    <div class="broken-egg"></div>
  </body>
</html>