IT 블로그

Css 3D 큐브 애니메이션 이번에는 transform을 이용해 아래와 같은 3D 큐브 애니메이션을 만들어 봤는데 그냥 재미로 한번 만들어 보자.. front back top btm left right Html 구조 잡기 html은 아래 코드와 같이 생각보다 엄청 간단하다. 정육면체의 앞, 뒤, 위, 아래, 좌, 우면과 각각의 면들을 감싸는 요소만 있으면 된다. 12345678 front back top btm left right Css 작성하기 먼저 큐브를 감싸는 녀석부터 원하는 크기와 각 면들의 3D애니메이션을 위해 transform-style에 preserve-3d를 지정해주었다. 123456.cube { position: relative; width: 200px; height: 200px; tra..

CSS 로딩 애니메이션 예제 - 2~3 이번에 만들 로딩 애니메이션 예제는 위와 같이 2가지다. 로딩 애니메이션이 너무 간단해서 2가지를 가지고 왔다. 정말 간단하다.. 구현하기 - 1 html 부터 작성해보자 bounce는 배경을 위해 넣었다. 123 cs 대충 배경 css를 작성해 주고 원(?)을 을 만들어보자 원의 css도 간단하다 원은 border-radius 50%를 적용하면 된다. 그후 배경 중앙으로 옮겨 주었다. 커지는 애니메이션은 scale을 사용하면 로딩 애니메이션 구현이 끝난다 ㅋㅋ keyframes 또한 간단하다. 123456789101112131415161718192021222324.bounce { width: 50%; height: 300px; background: #141926;..

CSS 로딩 애니메이션 예제 - 1 이번만들 예제는 css의 @keyframes(키프레임)라는 애니메이션 요소를 활용해 위와 같이 로딩중에 사용 할 수 있는 로딩 애니메이션을 만들어 보자. css keyframes의 사용법만 알고 있다면 이전 포스팅에 비해 간단한 예제고 소스 코드도 몇줄 안나온다 ㅋㅋㅋ 구현하기 먼저 로딩을 위한 html을 작성해 주자 별거 없다 엄청 간단하다 3줄 이다.. 이전 포스팅에 만든 filp 애니메이션이랑 같은 원리로 원근감을 주어야 하기때문에 애니메이션시킬 요소를 한번더 감싸주었다. 123 이제 flip-box의 css를 작성해 보자. flip-box는 감싸는 요소로 원하는데로 지정해 주면된다. 나는 예제와 같게 아래와 같이 지정했다. 원근감을 줘야하기 때문에 perspec..

CSS Hover 애니메이션 - 1,2,3 코드 모음 전에 작성한 CSS Hover 애니메이션 1,2,3편의 소스 코드만 정리 해두었습니다. CSS Hover 애니메이션 - 1 결과물 Html 1234 Css 길어서 2개로 분리 하였다. 123456789101112131415161718192021222324252627282930313233343536373839404142.image-box { width: 200px; height: 200px; padding: 20px; background: skyblue; box-sizing: border-box; position: relative; cursor: pointer;}.image-box::after { content: ""; display: block; po..

CSS hover 애니메이션 - 3 아래와 같이 x 버튼에 마우스를 hover 했을때 close로 바뀌는 애니메이션을 css로 만들어 보자. CLOSE 구현하기 먼저 html을 작성해 줍시다. 12345 CLOSE 저 검정(?)상자의 스타일을 지정해주자 1234567.content { width: 150px; height: 150px; position: relative; box-sizing: border-box; background: #141926;} 다음으로 x를 감싸주는 상자의 css를 지정해 봅시다. 123456789.close { width: 80px; height: 50px; cursor: pointer; position: relative; left: 50%; top: 50%; transform..

CSS Flip 애니메이션 - 2 마우스 오버시 아래와 같이 뒤집어져 뒷면에 있는 콘텐츠가 보이는 애니메이션을 css로 만들어 보았다. 엄청 간단하게 구현 가능하다. 앞면 뒷면 구현하기 먼저 아래와 같이 기본 레이아웃을 잡아주자 뒤집을 요소와 그 요소를 감싸는 부모 요소가 있어야한다. 뒤집을 요소안에 앞,뒷면을 나누고 그 안에 원하는 콘텐츠를 넣으면 된다. 123456 앞면 뒷면 이제 스타일을 지정해주자. flip-box의 css는 다음과 같다. 가로 세로 사이즈는 원하는대로 지정하면 된다. 여기서 투영점 perspective는 3D를 위한 속성이다. 쉽게말해 원근감이라고 생각하고 적당히 조절해보자 12345.flip-box { width: 300px; height: 400px; perspective: ..

CSS Hover 애니메이션 - 1 css 호버효과, 가상요소 ::before, ::after를 활용하여 아래와 같은 호버효과를 css로 만들어 보았다. 만들어보자 이제 직접 만들어 보자 엄청 간단하다. 먼저 호버할 상자를 아래와 같이 만들어주자 123 그리고 상자에 원하는 css를 적용시켜 보자 자식 요소인 검정색 커버 위치조정을 absolute로 해야하기 때문에 position: relative를 써주자 12345678.image-box { width: 200px; height: 200px; padding: 20px; background: skyblue; box-sizing: border-box; position: relative;} image-box에 ::after를 이용하여 검정색 커버를 씌워고 ..