bounce ball1 CSS 바운스볼 애니메이션 만들기 (bounce ball animation) 안녕하세요! 오늘은 공이 위아래로 통통 튀는 애니메이션을 만들어 보려 합니다. 난이도가 높아지는 것을 우려하여 자바스크립트는 쓰지 않고 오로지 html과 css만을 사용하여 최대한 간단하게 만들어 보려해요! 리얼하게 튀는 효과를 주려다 보니 keyframe 쪽이 조금 복잡해 지긴했지만 그래도 css만을 이용해 구현해 보았습니다. 공이 튈때마다 그림자 크기를 늘이고 줄이면서 그림자 효과도 추가로 함께 구현해 보았습니다. 그럼 결과화면을 먼저 확인해 볼까요? 저렇게 하염없이 통통통통 계속 튀는 애니메이션 입니다! 활용은 로딩화면에서 사용해도 괜찮을 것 같고 메인화면에 포인트를 주기 위한 용도로도 사용할 수 있을 것 같아요~ 그럼 영역과 요소부터 만들어 보겠습니다. 1. 배경과 공, 그림자 요소 만들기 애니메.. 2023. 1. 9. 이전 1 다음