DAY #18
- 문제
👉 문제 바로가기
Pac-Man: Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka Waka…
팩맨이 와구와구 뭔가를 먹고있는 모션을 만드는 문제~
이번 문제는 오랜만에 딱! 보자마자 어떻게 만들어야 할지 감이 왔다.
일단! 이렇게 팩맨의 입모양을 만들기 위해, 머리 부분 반원 + 턱 부분 반원 을 만들어야 한다!
그래서 프레임 안에 팩맨이 들어갈 영역을 만든 다음 가운데에 배치하고, 그 안에 반원을 위, 아래로 배치했다.
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0; // 돔 모양
border-radius: 0 0 50px 50px; // 그릇 모양반원 만드는 법~
너비: 100px
높이: 너비 / 2
border-radius: 너비 / 2
border-radius 같은 경우에는 원의 반지름, 즉 높이 값을 넣어주면 된다.
근데 그 이상으로 해도... 브라우저가 알아서 맞게 바꿔서 넣어줌 ㅋㅋ
😋냠냠 팩맨 모양 만들기!
자 이제 입을 벌릴 차례!(?) transform: rotate() 를 이용해서 반원을 각각 돌려줘야 한다.
근데 그냥 냅다 돌려버리면
이렇게,,, 잘려버리기 떄문에 ㅠㅠ
transform-origin 을 사용해서 기준점을 바꿔주어야 한다.
기본값은 transform-origin: center 라서 이렇게 중간 기준으로 돌아가지만!
요러케 기준점을 transform-origin: center bottom 중간 아래로 바꿔주면
머리가 안짤린 입모양을 만들수 있게 된다~~~
아래 턱 모양에는 transform-origin: center top 해서 중간 위쪽으로 바꿔주고
rotate 각도 반대로해서 적용해주면
팩맨 모양 완성~~~!
🍮먹이 무한대로 만들기!
그리고 저 먹이? 같은 동그라미들이 들어갈 영역도 만들어준다~
.food {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
...
}팩맨의 뒷통수를 빠져 나오지 않을 정도의 너비로 잡아줌!
그리고 화면 밖에서 무한으로 나오게 하는 것처러 만들려면 영역을 화면 밖으로 빼줄 필요가 있음!
근데 얼마만큼 빼느냐가 중요함!
right: - (원 너비 + 사이 간격 너비)
이만큼을 빼야 animation을 줬을때 원이 자연스럽게 무한으로 나오는 것 처럼 만들 수 있다!
@keyframes food {
0% {
right: -56px;
}
100% {
right: 0;
}
}animation: food 0.8s linear infinite;여기서 중요한 부분은 반드시 linear 를 해줘야 먹이가 일정한 속도로 오는 모션을 줄 수 있다는 것!
- 내가만든 CSS Code
- 결과물
어떻게 보면 무한이 아니라 위치를 이용한 눈속임이지만!
눈속임을 어떻게 잘 하느냐도 문제를 푸는 방식 중 하나가 아닐까 싶다~~😊
끝
