반응형
animation-duration
-
CSS 움직이는 공 만들기 (상하좌우 움직이는 공)컴퓨터 알아가기/HTML CSS 2022. 5. 4. 19:30
이제는 재미로 공이 바닥에 튕겼다가 다시 중력에 의해 내려오는 모양을 만들어 보려고 합니다. 이를 응용하여 최종 로또추첨기에서 뽑혀지는 총 7개의 공이 움직이면서 1초의 간격을 두고 나타날 수 있게 해보는게 목적입니다. VS Code 편집기를 이용하여 연습해 보도록 하겠습니다. 기본적인 HTML과 CSS가 필요하겠죠. 1. 기본 HTML 포맷만들기 아래 그림과 같이 기본 포맷안에 CSS연결과 JS연결할 경로를 세팅해 줍니다. 이럴경우 태그내 태그의 id를 활용하도록 합니다. 태그는 다음과 같이 간단합니다. 물론 자바스크립트에서는 태그를 선택해야 겠지요. 2. CSS 꾸미기 여기서는 색을 직접 반영하여 진행하며 원의 크기도 지정합니다. 순서는 색, 원모양 만들기, 애니메이션 적용 스킴을 id내에 지정해 주..