728x90 반응형 CSS127 [@keyframes/CSS3] animation ease linear steps 값의 차이 animation-timing-function: linear; 를 사용하면 끊김없이 자연스럽게 계속해서 돌아간다 무한으로 자연스럽게 360도 회전하는 애니메이션 구현할 수 있다. animation-timing-function값은 아래와 같이 설정할 수 있고, 다음의 결과도 아래에서 확인 가능하다. /* 진행되는 동안의 속도에 관한 설정 기본값 ease ease : 천천히 시작되고 속도가 줄어들면서 끝난다(속도차이 매우 미세) ease-in : 천천히 시작 ease-out : 빠르게 시작 ease-in-out: 빠르게 시작되어 평균속도 유지 (속도차이큼) linear : 일정한 속도로 진행 step-start : 시작하자마자 순간적으로 바뀜 (아래에서는 시작과 끝이 같아서 확인불가) step-end : 시.. 2019. 4. 17. [CSS3] button hover 애니메이션 버튼에 hover했을때 줄 수 있는 다양한 애니메이션을 구현해보았습니다. 단순하게 색이 채워지는 이벤트부터 내가 마우스를 올린 위치를 가져와서 시작지점으로 두고 색이 채워지는 효과 var currentX = e.pageX; var currentY = e.pageY; transform을 이용해 scale이나 rotate등을 이용해 효과를 구현하기도 했습니다. See the Pen hover animation by gahyun (@gahyun) on CodePen. See the Pen Untitled by gahyun (@gahyun) on CodePen. [CSS/CSS 응용] - [CSS] Button animation 버튼 애니메이션 효과 2019. 4. 15. [CSS3]로딩 애니메이션 구현하기 css 애니메이션을 다양하게 이용한 로딩 애니메이션 효과입니다. 디자인을 적용한다면 유용하게 쓸수 있을거같습니다. See the Pen clock, loading animation css-로딩관련 css by gahyun (@gahyun) on CodePen. 2019. 4. 12. [CSS3]input radio 토글버튼 만들기 input radio의 label을 이용해 토글버튼을 만들어줍니다. input radio는 같은 name을 갖는것끼리 묶음이 됩니다. (같은 묶음 중 1개만 선택 가능합니다.) input과 label은 id와 for의 값으로 묶입니다. (이렇게 묶이면 label 을 클릭해도 input radio가 선택됩니다.) See the Pen input radio css by gahyun (@gahyun) on CodePen. 스크립트를 쓰지 않는 더 쉬운방법! [CSS/CSS 응용] - input[type='checkbox'] 로 toggle 버튼 switch 버튼 만들기 2019. 4. 11. 이전 1 ··· 27 28 29 30 31 32 다음 728x90 반응형