본문 바로가기

728x90

CSS/Animation8

텍스트 효과 애니메이션 ⭐️ 애니메이션 효과 : 텍스트 효과 ⭐️ 01. 애니메이션 효과 애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 연속된 장면(sequence)를 나타내는 복수의 키프레임(@keyframes)들로 이루어집니다. ___ 참고하기 ___ `1 @keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다. 02. 눈에 띄는 텍스트 효과 만들기 [1] 박스 만들기 svg 태그를 만들어 줍니다. oranssy [2] CSS 설정하기 @keyframes 을 이용하여 애니메이션의 움직임을 조절합니다. @font-face {.. 2022. 9. 8.

걸어가자 ⭐️ 애니메이션 효과 : 걸어가자 ⭐️ 01. 애니메이션 효과 애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 연속된 장면(sequence)를 나타내는 복수의 키프레임(@keyframes)들로 이루어집니다. ___ 참고하기 ___ `1 @keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다. 02. gif 에서 이미지 가져오기 [1] 박스 만들기 포토샵으로 gif 파일을 하나씩 이어붙입니다. 가로로 긴 ~ 이미지 파일이 만들어집니다. 03. html 작성 [1] 박스 만들기 포토샵으로 gif.. 2022. 9. 8.

CSS animation ⭐️ CSS 애니메이션 ⭐️ 01. animation animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animati.. 2022. 9. 8.

SVG animation SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C (World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형(rect) svg 원형(circle, el.. 2022. 9. 8.

애니메이션 효과 _ 무한대 공 ⭐️ 애니메이션 효과 : 무한대로 튀는 공 ⭐️ 01. 애니메이션 효과 애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 연속된 장면(sequence)를 나타내는 복수의 키프레임(@keyframes)들로 이루어집니다. ___ 참고하기 ___ `1 @keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다. 02. 무한대 모양으로 튀는 공 [1] 박스 만들기 div 안에 div 가 있는 구조를 5개 만들어 줍니다. [2] CSS 설정하기 @keyframes 을 이용하여 애니메이션의 움직임을 조절합니다. * { b.. 2022. 9. 5.

애니메이션 빙글빙글 ⭐️ 애니메이션 효과 : 빙글빙글 점 둘 ⭐️ 01. 애니메이션 효과 애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 연속된 장면(sequence)를 나타내는 복수의 키프레임(@keyframes)들로 이루어집니다. ___ 참고하기 ___ `1 @keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다. 02. 점 두 개가 빙글 도는 효과 만들기 [1] 박스 만들기 div 안에 span 으로 점 두 개를 만들어 줍니다. [2] CSS 설정하기 @keyframes 을 이용하여 애니메이션의 움직임을 조절합니다. b.. 2022. 8. 29.

애니메이션 박스 ⭐️ 애니메이션 효과 : 통통 튀는 박스 ⭐️ 01. 애니메이션 효과 애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 연속된 장면(sequence)를 나타내는 복수의 키프레임(@keyframes)들로 이루어집니다. ___ 참고하기 ___ `1 @keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다. 02. 통통 튀는 박스 만들기 [1] 박스 만들기 상자 하나만 만들어주면 됩니다. [2] CSS 설정하기 @keyframes 을 이용하여 애니메이션의 움직임을 조절합니다. body { height: 100vh;.. 2022. 8. 29.

애니메이션 - 꼬리 흔드는 강아지 만들기 ⭐️ 애니메이션 효과 : 꼬리 흔드는 강아지 ⭐️ 01. 애니메이션 효과 애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 연속된 장면(sequence)를 나타내는 복수의 키프레임(@keyframes)들로 이루어집니다. ___ 참고하기 ___ `1 @keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다. 02. 꼬리 흔드는 강아지 만들어보기 [1] 박스 만들기 강아지의 움직임을 어떻게 표현할지 생각하고 박스를 만듭니다. [2] CSS 설정하기 Scss 를 활용합니다. @keyframes 을 이용하여 애니메이.. 2022. 8. 18.

이전 1 다음

728x90

티스토리툴바