Animation5 CSS 막대 로딩바 (크기가 변하는 막대 로딩바 만들기) 안녕하세요~ 오늘은 앞에서부터 막대의 크기가 점차적으로 변하는 로딩바 애니메이션을 만들어 보려고 합니다. 약간의 시간차를 두고 막대의 높이가 차례로 변하는 애니메이션인데요! 결과 화면부터 확인해 보겠습니다. 위와 같은 로딩바입니다~ 결과화면으로 보면 어떤 효과인지 바로 알 수 있는데, 막상 문장으로 표현하려니 어떤 로딩바인지 한단어로 정의하기가 쉽지 않네요... 아무튼 위와 같은 로딩바를 만들어 보겠습니다. 우선 막대가 위치할 영역과 막대를 구성할 요소부터 만들어 보겠습니다. 1. 영역과 막대 요소 만들기 전체 영역인 container를 relative 포지션으로 가로, 세로 200px로 화면 가운데 위치해 주고, 안에 막대바가 들어갈 area영역을 absolute 포지션으로 가운데 자리 잡아 주었습니다.. 2023. 1. 12. CSS 바운스볼 애니메이션 만들기 (bounce ball animation) 안녕하세요! 오늘은 공이 위아래로 통통 튀는 애니메이션을 만들어 보려 합니다. 난이도가 높아지는 것을 우려하여 자바스크립트는 쓰지 않고 오로지 html과 css만을 사용하여 최대한 간단하게 만들어 보려해요! 리얼하게 튀는 효과를 주려다 보니 keyframe 쪽이 조금 복잡해 지긴했지만 그래도 css만을 이용해 구현해 보았습니다. 공이 튈때마다 그림자 크기를 늘이고 줄이면서 그림자 효과도 추가로 함께 구현해 보았습니다. 그럼 결과화면을 먼저 확인해 볼까요? 저렇게 하염없이 통통통통 계속 튀는 애니메이션 입니다! 활용은 로딩화면에서 사용해도 괜찮을 것 같고 메인화면에 포인트를 주기 위한 용도로도 사용할 수 있을 것 같아요~ 그럼 영역과 요소부터 만들어 보겠습니다. 1. 배경과 공, 그림자 요소 만들기 애니메.. 2023. 1. 9. SVG 원형 프로그래스바 (svg circle progress bar) 안녕하세요~ 지난번에 만들었던 원형 스피너에 이어서 오늘은 프로그래스바를 만들어 보겠습니다. 원형바에 테두리가 처음부터 끝까지 조금씩 차오르는 애니메이션인데요~ 결화 화면부터 확인해 보겠습니다. 테두리 일부를 반복해서 rotate 하는 효과와 달리 시작점부터 끝까지 테두리가 차오르는 애니메이션 효과 입니다. 사용할 수 있는 다양한 방법이 있겠지만 svg를 이용하여 테두리를 그려주는 방법으로 오늘은 효과를 적용해 볼 계획입니다. 그럼 요소부터 만들어 볼까요? 1. svg 요소 그려주기 컨테이너 영역 내부에 svg 태그를 width 60, height 60 크기로 만들어 주었습니다. svg 내부에 투명한 테두리 원형 하나와 내부에 차오르는 효과를 줄 원형 두개를 그려 주겠습니다. width의 절반인 30을 .. 2023. 1. 4. CSS 도트 확대 로딩바 (css dot loading bar) 안녕하세요~ 오늘은 원형 도트가 서서히 확대되는 애니메이션의 로딩바를 만들어 보려고 합니다! 결화 화면 부터 먼저 확인해 보겠습니다. 위와 같은 원형의 도트가 차례로 하나씩 확대대는 로딩바입니다. keyframes, transform 속성을 이용해 원형 애니메이션을 만들고, 시간차를 주어 효과를 적용해 보려 합니다. 우선 요소를 만들고 자리잡아 주겠습니다. 1. 내부 요소 만들기 [html] 위와 같이 전체 초록색 배경의 영역인 container와 내부 도트가 위치할 영역인 area를 만들어 주고, 내부에 dot1, dot2, dot3 3개의 도트 요소를 만들어 줍니다. 도트 요소의 경우 border-radius 속성을 100%로 주어 원형으로 만들어 주었습니다. .area 영역의 margin의 경우 전.. 2022. 12. 20. 이전 1 2 다음