animation6 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 circle loading spinners) 안녕하세요~ 오늘은 로딩화면에서 빙글 빙글 돌아가는 로딩 스피너를 만들어 보려 합니다! css를 활용하여 style을 주고, 애니메이션을 사용하여 가장 기본적인 스피너를 만들어 볼 계획입니다. 결과 화면을 먼저 확인해 볼까요? 위와 같이 원형 스피너 일부가 색상을 가지고 돌아가는 모양의 스피너 입니다. 그럼 요소부터 말들어 보겠습니다. 1. 사각형 요소 만들고 윗부분 색상 주기 위와 같이 container 영역 내부에 spinner 영역을 사각형으로 만들어 주고 크기와 색상을 지정해 줍니다. 여기서 사각형 테두리의 경우 전체 border 값은 rgba(255, 255, 255, 0.3) 값을 사용해 0.3만큼 투명하게 만들어주고 border-top-color 값만 white로 주어, 윗부분의 테두리 색상.. 2022. 12. 22. 이전 1 2 다음