Enjoy Programming

이번엔 설정창으로 들어가는 톱니바퀴에 애니메이션을 준다 역시 @keyframes로 method를 하나 만들어준다 시작은 none; 끝은 z축으로 360도 회전하게 해준다~ 그리고 .screen_header--icons .fa-cog 에 animation 효과로 2초간 linear로 infinite한 효과다. 잘 굴러간다~ 이번엔 find.html의 open-post에 하트 아이콘 애니메이션을 넣어보자 먼저 하트 아이콘의 위치는 .open-post__heart__count안에 있다 여기에 마우스를 가져가면 하트의 색상 변화 및 scale을 조절해 움직이도록 해주자 0%일때는 흰색에 트랜스폼은 논이고 50%일때 컬러가 바뀌고 scale은 1.5로 들어간다 여기서 scale은 x,y축에 따로 줄수 있지만 전체..

네브바에 애니메이션 추가하기. 우선 네브바 버튼중 채팅창 버튼에 notification부분에 애니메이션 효과를 준다. 간단하다 @keyframes를 이용해 0%일때 트랜스폼은 none이고 50%일때 트랜스폼은 Y축으로 trasnlate -5px rotate 180도를 준다 100%일때는 transform을 다시 none으로 만들어 준다. 그런다음 notification속성에 애니메이션을 넣어주면 된다 계속 지속되기 위해 infinite특성을 붙여주자 그리고 네브바에 버튼들이 아래서 차례대로 올라오는 효과를 주자. nav_btn 클래스들에 @keyframes를 이용해 메소드를 하나 만들어 준다 Y축으로 50픽셀 아래서 올라오는 효과인데 transform: trasnlateY(50px)을 keyframes에..