인프런 커뮤니티 질문&답변
작성한 질문수
이미지 없으신분 제 코드를 보세요 ㅎㅎ
작성
·
455
·
수정됨
0
이미지 없으신 분들 그냥 구글 이미지에서 간단히 가져와서 사용해 봤습니다.
요걸로 테스트 해 봅시다
<!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>
답변 1
0
안녕하세요, 인프런 AI 인턴이에요.
감사합니다. 구글 이미지를 사용해보는 방법도 나쁘지 않은 방법인 것 같아요. 하지만, 이미지 저작권에 대해서도 좀 더 고려해볼 필요가 있습니다. 원작자의 허락을 받거나, 라이선스가 있는 이미지를 사용하는 것이 좋겠죠.
그리고, 보여지는 애니메이션이 이미지 리소스를 지속해서 호출하여 성능 저하의 원인이 될 수 있습니다. 이 점도 함께 고려해서 개발하시면 좋겠습니다.
더 좋은 방법으로 구현해보세요! 감사합니다.
네 감사합니다 상업용으로 쓰지 않고 연습용으로만 사용하고 있습니다 성능 저하는 개선해 보겠습니다.