분류 전체보기17 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를 사용하여 html 요소를 세로로 가운데 정렬 하는 방법에 대해 포스팅 하려합니다. 가로 정렬방법에 비해 방법이 여러가지고 적용하려면 혼동 되는 경우가 많아 이번 기회에 정리하는 시간을 가져볼까 합니다. 그럼 하나씩 알아볼까요 1. display:table 이용 가운데 정렬할 box요소의 가장 바깥쪽 table영역에 display: table, position: relative 적용 후 한단계 아래 table_cell영역에 display: table-cell, vertical-align: middle 속성을 부여하는 방법 입니다. 아래와 같이 세로로 가운데 정렬된 결과 화면을 확인 할 수 있습니다. 2. margin: auto 이용 wrapper영역을 position: relative로 지.. 2022. 12. 29. CSS box-shadow 속성 사용방법 정리 안녕하세요! 오늘은 요소의 테두리에 그림자 스타일을 설정하는 box-shadow 속성에 대해 알아 보려고 합니다. 자주 사용하는 속성인데 내부 속성 인자 값이 많고 정확한 의미를 모르고 사용하는 경우가 많아서 정리해보려고 합니다! 속성 내부 설정 값 그림자의 위치를 설정하는 첫번째, 두번째 길이설정 값입니다. offset-x 값이 양수일 경우 오른쪽으로 그림자나 나타나고 음수일 경우 왼쪽으로 그림자가 표시됩니다. offset-y 값이 양수일 경우 아래쪽으로 그림자나 나타나고 음수일 경우 위쪽으로 그림자가 표시됩니다. 그림자 테두리의 흐린 정도를 나타내는 세번째 길이설정 값입니다. 이 값이 클 수록 그림자 크기는 더 커지고 색은 더 밝아 집니다. 음수 값은 사용할 수 없고, 기본값은 0으로 설정하지 않을 .. 2022. 12. 28. 이전 1 2 3 4 5 다음 more