본문 바로가기

애니메이션7

CSS 애니메이션 만들기 : 3D 박스 애니메이션 CSS 애니메이션 : 3D 박스 애니메이션 오늘은 움직이면서 크기가 변형되는 3D 박스를 만들어 보겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen Untitled by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 소름 cube class를 가진 div 박스를 하나 만들어 주고, 그 안에 div 박스 6개를 작업해 줍니다. div 박스 6개는 정육면체의 각각의 면입니다. 원하는 문구를 작성하면 됩니다. 2. CSS 소스 body { background-color: lavender; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; .. 2022. 9. 22.

CSS 애니메이션 만들기 : 카드 뒤집기 CSS 애니메이션 : 카드 뒤집기 애니메이션 오늘은 마우스를 오버했을 때 카드가 뒤집히는 듯한 애니메이션이 나타나도록 작업해 보겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen hoveranimation by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 Mouse Hover Effect 마우스를 올리면 Up Mouse Hover Effect 마우스를 내리면 Down Mouse Hover Effect 마우스를 올리면 to Right Mouse Hover Effect 마우스를 내리면 to Left HTML 소스는 전체에 해당하는 hover__wrap 안에 hover__updown, hover__leftright 두 개의 div 박스를 만들어 줍니다. 그 안.. 2022. 9. 20.

CSS 애니메이션 만들기 : GIF 이미지 애니메이션 구현하기 CSS 애니메이션 : GIF 이미지 애니메이션 구현하기 오늘은 조금 다른 방식으로, GIF 이미지를 애니메이션으로 구현하는 방법을 알아보겠습니다. 1. 애니메이션을 만들 이미지 찾기 먼저, 어떠한 GIF 이미지를 애니메이션으로 만들 것인지 결정합니다. 2. 애니메이션의 프레임 나열하기 Photoshop에서 GIF 이미지를 가져와 Timeline 창을 띄우면, GIF를 이루고 있는 각각의 레이어들이 나타납니다. 여우 이미지의 크기는 1600px * 1200px이며, 레이어는 총 18개가 있었습니다. GIF의 이미지의 너비(1600px) X 레이어 수(18)의 값(28,800px)을 구해줍니다. 이후, width값이 28,800px, height값이 1200px인 새로운 창을 만들고, 여우의 움직임에 해당하.. 2022. 9. 8.

CSS 애니메이션 만들기 : 애니메이션 기초 CSS 애니메이션 만들기 : 기초 애니메이션 오늘은 CSS의 다양한 애니메이션과 관련된 속성을 알아보고, 기초적인 애니메이션을 만들어 보도록 하겠습니다. ANIMATION 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션 끝나고 난 뒤 어떤 값을 적용할지.. 2022. 9. 8.

CSS 애니메이션 만들기 : SVG CSS : SVG 애니메이션 만들기 SVG로 도형 만드는 방법을 알게 되었으니, 더 나아가 SVG에 애니메이션 효과를 주는 방법에 대하여 알아보도록 하겠습니다. 1. HTML로 도형 만들기 2. CSS로 애니메이션 효과 추가하기 stroke-dasharray 속성은 선을 대쉬 형태로 만들며, 값을 부여한 만큼 대쉬 길이가 늘어납니다. 만약 svg의 path 길이가 100이고, dasharray의 길이를 50으로 설정하면, SVG는 절반만 보이게 되는 것입니다. 한편, stroke-dashoffset 속성은 그림이 어떤 부분에서부터 시작할지 정하는 속성입니다. .ani1 { width: 100px; height: 100px; x: 30px; y: 30px; fill: none; stroke: #880E41.. 2022. 9. 8.

CSS 애니메이션 만들기 : 굴러가는 네모 CSS 애니메이션 : 굴러가는 단무지 오늘은 CSS의 다양한 속성을 이용하여 애니메이션을 만들어 보도록 하겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen animation01 by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 단무지의 그림자는 가상요소로 작업해줄 것이기 때문에, HTML 소스는 box 클래스를 가진 div 박스 하나로 충분합니다. 2. CSS 소스 body { height: 100vh; background-image: linear-gradient(to top, skyblue, pink); } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; .. 2022. 8. 29.

CSS 애니메이션 만들기 : 빙글빙글 돌아가는 원 CSS 애니메이션 : 빙글빙글 돌아가는 원 오늘은 CSS의 다양한 속성을 이용하여 애니메이션을 만들어 보도록 하겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen animation02 by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 돌아가는 원을 두 개 만들 것이기 때문에, circle 이름을 가진 span 태그를 두 개 작업해 주었습니다. 2. CSS 소스 body { height: 100vh; background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 1.. 2022. 8. 29.

이전 1 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바