Lpla 개발 블로그

HTML&CSS

[CSS] 16가지 버튼 애니메이션 효과

See the Pen Candy Color Button Animation by Yuhomyan (@yuhomyan) on CodePen. 웹사이트를 퍼블리싱할 경우 기획을 바탕으로 디자인한 시안을 그대로 따라서 제작하게 된다. 하지만 기획이나 시안 단계에서는 주로 레이아웃과 컨텐츠 배치에 신경 쓰고, 마우스오버시 어떻게 나타나달라, 클릭시 이런 효과가 있으면 좋겠다라는 요구는 잘 없다. (아예 없진 않다.) 그래서 퍼블리셔의 재량에 따라 버튼 같은 요소에 효과를 추가할 수 있는데 나는 가급적이면 사이트를 새로 제작할 때마다 조금씩 새로운 기능이나 효과를 사용하려고 노력한다. 다음에는 이 codepen에 있는 버튼을 사용해 볼 생각이다.

HTML&CSS

[CSS] 공전하는 애니메이션 효과 (transform: rotate)

기본세팅 HTML 1 2 3 4 5 SCSS .outer { width: 20rem; height: 20rem; position: relative; border: 2px solid #426190; border-radius: 50%; margin: 25% auto; } .satellite_wrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .satellite_box { position: absolute; top: -25%; left: -25%; width: 150%; height: 150%; animation: forwardRotate 8s linear infinite; text-align: center; line-height:..