CSS 애니메이션 효과

animate.style/

 

 

 

Animate.css | A cross-browser library of CSS animations.

 

PORTFOLIO_ANIMATION 텍스트 박스

<div class="font_box1">

회전하는 정육면체
div 태그 6개로 면6개를 만들어 줍니다 이어서con 태그로 감싸 하나의 객체처럼 만듭니다.

position absolute를 적용하고 각각의 태그를 적당한 각도로 회전시킵니다. con에 transform-style속성에 preserve-3D키워드를 합니다 backface-visibility 속성으로 3차원 공간에서 평면의 후면을 보이지 않게 hidden 합니다 마지막으로 prespecitive 속성 값이 클수록 픽셀을 밀집해서 보여주어 입체감있게 보여줍니다.
</div>

 

<div class="font_box2">

컬러 텍스트 반전

각 2개의 div태그를 만들어 줍니다.

이어서 circle요소에 border-radus속성을 사용합니다.

animation에 소요되는 시간 3s 적용후 alternate infinite속성값을 부여 합니다.

mix-blend-mode 속성을 이용해 difference 속성값으로 반전된 색상을 보여줍니다.

</div>

<div class="font_box2">

통통 튀는 공

div태그중 4개의 div태그에 border-radius 속성을 사용해

동그란 원을 만들어 줍니다. animation에 3s 정도 시간을 지정합니다.

ease infinite 속도를 설정합니다. 각 4개의 div요소에 animation-delay속성

1s~2s 시간 차이를 주고 키프레임에 시작지점과 종료시점에 translateY()을 사용해

위에서 아래서 통통 튀기는 모습을 보여줍니다.

</div>

 

<div class="font_box2">

네온라인 버튼

4개의 span 요소를 감싸고 있는 a태그를

inline-block속성을 변경후 버튼을 만듭니다

마우스 오버시 box-shadow 그림자 길이를 주고나서 블루 컬러를 넣어 줍니다.

span태그는 블록요소 변경후 각 요소에 width 100%값 height 2px 값을 다르게 줍니다.

그라디언트와 transparent를 적용합니다.

마우스 오버시 transition 과 transition-delay 속도 차이를 주어서

네온라인 버튼을 만들어 줍니다.

</div>