애니메이션 Pacman 패턴 만들기
위의 프레젠테이션에서 보듯이 HTML이나 JS가 없는 CSS만 사용합니다.(기술적으로 페이지는 여전히
<html> 및 <body> 표시가 있지만 HTML 부분이 모두 비어 있는 것을 보면 멋있다.)CSS 그래디언트
linear-gradient , radial-gradient 와 지원은 적지만 쿨한 conic-gradient 를 사용하여 구축할 것입니다. 이것은 background-image 속성을 가진 모델을 만드는 데 도움을 줄 것입니다.점 패턴 설정하기
'콩을 먹는 사람'도안은 짙은 색 배경으로 구성되어 배경에 곳곳에 점이 있다.점을 생성하기 위해
radial-gradient 및 설정 background-size 을 사용하여 큰 원을 표시하지 않고 패턴이 작고 반복 (기본값) 되도록 합니다.html, body {
background-color: black;
background-image: radial-gradient(white 10%, transparent 0);
background-size: 8vmin 8vmin;
}
벽 추가
우리는 화면 주위에 파란색 벽을 하나 더할 것이다.가장 간단한 방법은 이전 CSS 규칙에 추가하여 이중 삽입 상자 섀도우를 추가하는 것입니다.
box-shadow: inset 0 0 0 2vmin black, inset 0 0 0 2.5vmin blue;
border-radius: 3vmin;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
Pacman 추가
Pacman을 생성하기 위해 위조 요소
::after를 사용합니다.추가border-radius:50%를 통해 둥글게 하고 conic-gradient를 사용하여 입을 생성합니다.body::after {
content: "";
display: block;
top: 0;
left: 0;
position: absolute;
width: 8vmin;
height: 8vmin;
border-radius: 50%;
background: conic-gradient(yellow 55deg, transparent 0 125deg, yellow 0);
}
위의 코드가 있으면 우리 팩맨이 화면의 왼쪽 상단에 나타날 것이다.
top 값을 변경하여 화면의 높이에 맞춥니다(우리가 사용하는 8vmin의 배수 사용).
애니메이션 제작!
콩을 먹는 사람의 입을 열고 닫는 애니메이션을 만드는 것부터 시작합시다.우리는 완전히 채워진 다른 원추 사다리로 원추 사다리를 교체한 후에 되돌아갈 것이다.
@keyframes eat {
0%, 50% { background: conic-gradient(yellow 55deg, transparent 0 125deg, yellow 0); }
25% { background: conic-gradient(yellow 55deg, yellow 0);}
}
Note: to avoid annoying flickering, we use a conic-gradient that places everything as yellow instead of just setting the background to yellow.
이제 다음 속성을
body::after에 추가하면 Pacman은 입을 열고 닫습니다. animation: eat 0.4s linear infinite;
background-image 속성은 애니메이션을 설정할 수 없으므로 부드럽게 변환되지 않고 한 상태에서 다른 상태로 이동합니다.이것은 그다지 좋지는 않지만, 그것은 빈티지한 외관을 제공할 것이다.이제 콩을 먹는 사람을 왼쪽에서 오른쪽으로 이동시키자.우리는 배경의 위치를 바꾸어 실현할 수 있다.
@keyframes movePacman {
0% { transform: translate(-8vmin, 0) }
100% { transform: translate(100vw, 0) }
}
animation 속성은 다음과 같이 업데이트됩니다. animation: eat 0.4s linear infinite,
movePacman 6s linear infinite;
마지막 윤색
지금 우리의'콩을 먹는 사람'은 벽을 뚫고 지나가고 있는데, 둥근 점 위에 있지만, 진정으로 그것들을 먹지 못하고 있다.몇 가지 변경을 통해 이 문제를 해결합시다.
벽을 깨다
우리는 이미
::after 위조 요소를 사용하여 Pacman을 그렸고, 우리는 여전히 ::before 을 사용하여 벽을 깨뜨릴 수 있다.우리는 벽을 통과하는 콩을 먹는 사람과 같은 위치에 작은 정사각형을 놓아 실현할 것이다.body::before {
content: "";
display: block;
position: absolute;
width: 2vmin;
height: 8vmin;
background: black;
left: 0;
top: 40vmin;
box-shadow: calc(100vw - 2vmin) 0 black;
}
땡땡이를 먹다
하지만 또 한 가지, 또 한 가지는 얄미운 일이다. 콩을 먹는 사람이 이 점을 넘어섰지만, 콩을 진정으로 먹은 적이 없다.
우리는 다른 방법으로 이 문제를 해결할 수 있다.
::before 콩을 먹는 사람의 경로를 따라 성장하고 상자의 음영을 증가시킬 수 있다.이 모든 것은 콩을 먹는 사람들이 먹는 것을 자극하기 위한 것이지만, 실제로는 새로운 배경 뒤에 숨겨져 있을 뿐이다.우리는
body 에서 새로운 배경을 직접 사용할 것이기 때문에 그곳에서 배경을 만드는 방식을 수정할 것이다. background-image: linear-gradient(black, black), radial-gradient(white 10%, transparent 0);
background-size: 100vw 8vmin, 8vmin 8vmin;
background-repeat: no-repeat, repeat;
background-position: calc(-4vmin - 100vw) 40vmin, 0 0;
@keyframes move {
0% { background-position: calc(-4vmin - 100vw) 40vmin, 0 0; }
100% { background-position: 0 40vmin, 0 0; }
}
코드 정리
우리는 우리의 애니메이션 모드 작업이 있지만, 지금은 좀 제한적이다모든 값은 하드코딩입니다. 큰 오류는 없지만, 위치, 크기, 색깔을 업데이트하려면 일이 복잡합니다.
색깔을 말하자면, 그것들은 너무 밝다우리는 그것들을 좀 부드럽게 해야 한다.그리고 애니메이션이 좀 느려요.우리는 시간을 더욱 적당한 시간으로 조정할 수 있다.
마지막으로:
calc() 위치 계산(환수 방지)Reference
이 문제에 관하여(애니메이션 Pacman 패턴 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/alvaromontoro/creating-an-animated-pacman-pattern-40c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
