animation6 CSS 도트 확대 로딩바 (css dot loading bar) 안녕하세요~ 오늘은 원형 도트가 서서히 확대되는 애니메이션의 로딩바를 만들어 보려고 합니다! 결화 화면 부터 먼저 확인해 보겠습니다. 위와 같은 원형의 도트가 차례로 하나씩 확대대는 로딩바입니다. keyframes, transform 속성을 이용해 원형 애니메이션을 만들고, 시간차를 주어 효과를 적용해 보려 합니다. 우선 요소를 만들고 자리잡아 주겠습니다. 1. 내부 요소 만들기 [html] 위와 같이 전체 초록색 배경의 영역인 container와 내부 도트가 위치할 영역인 area를 만들어 주고, 내부에 dot1, dot2, dot3 3개의 도트 요소를 만들어 줍니다. 도트 요소의 경우 border-radius 속성을 100%로 주어 원형으로 만들어 주었습니다. .area 영역의 margin의 경우 전.. 2022. 12. 20. CSS 테두리 효과 애니메이션(css border animation) 안녕하세요! 오늘 만들어 볼 css 애니메이션은 테두리가 시계방향으로 생성 되며 채워지는 border animation입니다. 결과 화면 부터 확인 해 볼까요? 위와 같이 시계방향으로 테두리가 생성되며 나타나고 반대로 지워질 때는 반시계 방향으로 테두리를 지우는 효과를 직접 만들어 보겠습니다. 우선 효과를 적용할 html 태그부터 만들어 보겠습니다. 1. 효과를 적용할 요소 생성 & 스타일 적용 [html] Border Effect 위 코드와 같이 a 태그 영역 안에 텍스트를 입력하고 테두리 효과를 적용할 span 태그를 상하좌우 각각 하나씩 총 4개를 만들어 줍니다. span 태그의 경우 absolute 속성을 주어 위치를 지정해 줄 예정 이어서 a 태그의 position 솏성은 relative로 설정.. 2022. 12. 19. 이전 1 2 다음