개발자 도담씨

회사에서 로딩화면 애니메이션으로 텍스트에 차오르는 느낌을 줄 수 있냐기에 알겠다하고 구현한 애니메이션... 물결로 하려니 조콤 힘들었다 😭 방법이 두가지가 있었는데 1. 물결 배경을 넣어 배경을 움직이는 방법 2. clip path를 이용한 방법 이중에서 나는 1번 방법을 택했다. 이유는 1번, 2번 다 해봤는데 2번을 이용해 차오르는 느낌을 주려니 중간에 애니메이션이 끊어지는 느낌이 강해서 택하지 않았다. 아래 참고한 영상을 첨부할테니 2번 방법을 해보시고 싶으신 분은 한번 도전해 보시길 :) [ HTML ] 크게 복잡할 것 없다. 아래부분이 끝! EXAMPLE [ CSS ] body { margin: 0; padding: 0; } .loader { position:fixed; top: 50%; lef..

아직 직접적으로 복잡한 애니메이션을 구현할 실력은 안되지만 !인터넷엔 많은 정보가 있다 ㅎ3ㅎ원하는 효과를 찾아 그냥 ctrl + c / v만 하는건 재미도 없고 실력도 늘지 않을 테니분석해서 포스팅 하는 카테고리를 만들어 봤다. 😚 첫번째로 만나볼 친구는 Input 태그의 CSS 효과이다.참고 : https://codepen.io/andreasstorm/pen/gKGbxo webkit 관련 속성들은 되도록 빼면서 한줄씩 분석했다.( webkit이 나쁘다는게 아니라 익스플로러는 되지 않으니 최대한 호환 되게끔... )코드는 해당 참고 사이트에서 보면서 같이 분석해주시면 감사하겠다. XD 위에서부터 처음 만나는 친구들을 정리해 놓으려고 한다.box-sizing: border-box;해당 속성을 지정하면 해..