Hello 100A

주로 사이드바가 열릴때 쓰는 햄버거 버튼을 닫기버튼 (x버튼)으로 변경하는 css 소스 입니다. 버튼을 클릭 시에 클래스가 추가되어 첫번째와 마지막 작대기는 transform의 rotate로 회전시키고 가운데 작대기는 opcity를 0로 변경해 안보이게 처리했습니다. html 소스입니다. css 소스입니다 .menu-wrap{ margin-top:50px; margin-left:100px; position: relative; width: 28px; height: 16px; cursor: pointer; } .menu-wrap .line{ position: absolute; width: 100%; height: 2px; border-radius: 2px; background: #222; left: 0; }..

마우스 오버시 수직으로 flip 되는 아주아주 간단한 css소스 입니다. HTML FRONT BACK CSS .content{ width:500px; height:100vh; background:#333; margin:0 auto; } .circle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; height:300px; perspective: 600px; } .circle .front, .circle .back{ position:absolute; top:0; left:0; width:100%; height:100%; backface-visibility: hidden; border-radius:50px;..

간단한 마우스 오버 애니메이션을 소개합니다. 영역에 마우스가 오버가 되면 아래의 그림과 같이 둥둥 뜨는듯하면서 그림자가 퍼지는 듯한 애니메이션입니다. HTML 코드입니다. circle-box 영역에 마우스가 오버가 되면 ICON에 애니메이션이 발동됩니다. ICON CSS 코드입니다. animation : circlemove 1.5s infinite linear; (circlemove의 속성대로 1.5초동안 애니메이션이 발동되고 무한루프로 속도는 일정하게) html,body {width:100%;height:100%;margin:0px;padding:0px;font-family:sans-serif;} .container{width:100%;height:100%;background:#000;} .circle..