본문 바로가기

애니메이션4

CSS애니메이션 예시 CSS animation 만드는 방법 1. 애니메이션으로 만들고 싶은 이미지를 프레임 수만큼 가져옵니다.(연속되는 이미지로 가져와주세요) 2. 이미지들을 하나로 이어 붙입니다. 포토샵에서 (이미지의 너비) X (프레임 수) 만큼의 너비로 새 파일을 만들어서 순서대로 이어붙이시면 됩니다. 3. 그 이미지를 저장합니다. 4. 이 이미지를 CSS의 background를 이용하여 넣어줄 위치에 위치시킵니다. 5. 애니메이션효과를 부여합니다. 소스는 아래의 소스를 참고해주세요. HTML 소스 .step { height: 700px; background: #333; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(.. 2022. 9. 8.

SVG 애니메이션 예시 예시 See the Pen Text Animation by Youcodein (@youCodein) on CodePen. HTML HTML 소스입니다. Hello smile CSS CSS 소스입니다. @font-face { font-family: 'Tmon'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfont.. 2022. 9. 8.

애니메이션 - CSS CSS animation 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 애니메이션 방향을 설정합니다. animation-fil.. 2022. 9. 8.

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

이전 1 다음

728x90

HTML

자세히보기

CSS

자세히보기

JAVASCRIPT

자세히보기

티스토리툴바