CSS23 움직이는 눈동자 애니메이션 움직이는 눈동자 애니메이션 CSS와 자바스크립트를 사용해 사진의 눈동자가 커서의 위치에 따라 움직이는 애니메이션입니다. See the Pen 눈이 움직이는 사진 by mbynae (@mbynae) on CodePen. ※ persepective 투시점의 거리를 설정합니다. perspective: length = 거리(length)만큼 투시점이 적용되어 3d 효과를 갖습니다. perspective: none = 투시점 거리를 설정하지 않습니다. 2022. 9. 26. 원 딜레이 회전 애니메이션 딜레이 원 회전 애니메이션 CSS를 사용해 작은 원이 딜레이를 가지고 회전하는 애니메이션입니다. See the Pen Untitled by mbynae (@mbynae) on CodePen. 2022. 9. 26. 박스 탄성 애니메이션 박스 애니메이션 CSS를 사용해 박스가 회전하며 위아래로 늘어나는 애니메이션입니다. See the Pen Untitled by mbynae (@mbynae) on CodePen. 2022. 9. 26. 물결 애니메이션 물결 애니메이션 CSS를 사용해 여러개의 원이 규칙적으로 웨이브를 만들어내는 애니메이션입니다. See the Pen CSS 물결 애니메이션 by mbynae (@mbynae) on CodePen. 2022. 9. 26. 이미지 호버 애니메이션 이미지 회전 애니메이션 CSS를 사용해 이미지에 커서를 올렸을 때 이미지가 180도 회전해서 뒷면이 나오게 하는 애니메이션입니다. See the Pen 이미지 앞뒤로 움직이는 마우스 호버 효과 by mbynae (@mbynae) on CodePen. 2022. 9. 26. 텍스트 테두리 애니메이션 글자 애니메이션 CSS를 사용해 글자의 테두리가 움직이며 글자를 나타내는 애니메이션입니다. See the Pen Text-Animation by mbynae (@mbynae) on CodePen. 2022. 9. 26. 움직이는 텍스트 애니메이션 글자 애니메이션 CSS를 사용해 각각 통통 튕기는 글자를 만드는 애니메이션 효과 입니다. See the Pen 글자가 통통 튀는 애니메이션 by mbynae (@mbynae) on CodePen. font-smoothing -webkit-font-smoothing: antialiased 폰트를 부드럽게 만들어주는 속성입니다. 아직 공식적으로 지원하는 기능이 아니라 -webkit-이 붙어있습니다. text-shadow text-shadow: offset-x offset-y blur-radius color 폰트에 그림자를 넣어주는 효과입니다. 뒤의 숫자는 각각 그림자의 x축 위치, y축 위치를 나타내며 그 뒤엔 그림자의 선명도와 색깔을 지정할 수 있습니다. 이번 애니메이션은 어려운건 없고 각각의 그림자의 애.. 2022. 9. 26. 다수 원 회전 애니메이션 다수 원 회전 애니메이션 CSS를 사용해 다수의 원을 회전시키는 간단한 애니메이션 효과 입니다. See the Pen 올챙이 by mbynae (@mbynae) on CodePen. 이번 애니메이션은 여러개의 원이 8자 형태로 계속 움직이는 애니메이션 효과입니다. 5개의 원이 회전하는데 각각 크기와 투명도를 다르게 하고 애니메이션에 딜레이를 주어 하나의 원이 잔상효과를 갖는 느낌으로 움직이도록 했습니다. ※ 애니메이션 딜레이 animation-delay : 애니메이션의 움직임에 주어진 지연 시간을 가지고 움직이도록 합니다. 2022. 9. 26. CSS Animation 2 CSS 애니메이션 효과 CSS를 이용해 애니메이션 효과를 주는 방법입니다. 포토샵을 이용한 애니메이션 이번 애니메이션 효과는 포토샵을 이용해 여러개의 이미지를 하나로 이어 붙인 후 css를 사용해 애니메이션을 주는 효과입니다. ▶ 포토샵으로 이미지 만들기 CSS로 사진같은 이미지의 애니메이션을 구현하기 위해선 여러장의 이미지를 이어붙여야 합니다. ▶ CSS로 애니메이션 구현하기 백그라운드로 이어붙인 이미지를 불러온 후 애니메이션 속성으로 각 이미지를 연속적으로 보여줌으로써 애니메이션이 구현됩니다. 이 때 step은 이미지의 초당 프레임을 나타내며 이미지가 24장일때 24를 쓰면 1초에 모든 이미지가 연속적으로 보여집니다. border-radius Start Stop } .stepBtn a { backgr.. 2022. 9. 8. css animation 1 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 애니메이.. 2022. 9. 7. SVG Animation SGV 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. 1. 인터넷 익스플로러9 버전 이상부터 지원됩니다. 2. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 3. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. 4. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 시작하기에 앞서 SGV In.. 2022. 9. 7. SGV Intro SGV 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. 1. 인터넷 익스플로러9 버전 이상부터 지원됩니다. 2. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 3. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. 4. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. ※ 부트스트랩이란 부트스트랩.. 2022. 9. 7. 이전 1 2 다음
