728x90 반응형 CSS/CSS 응용30 [CSS]3D 버튼 애니메이션 :before 와 :after 두가지 가상클래스를 이용해서 버튼의 두가지 면을 만들고 transform을 이용해 3D 효과를 구현했다. 이때 3D효과를 위해서는 perspective가 꼭 필요하다 See the Pen 3d button by gahyun (@gahyun) on CodePen. 2019. 5. 29. [CSS]animation - 애니메이션 효과 중지했다가 다시 시작하기 애니메이션을 동작하던중 중지했다가 중지한 기점으로 다시 시작하는 방법 css 애니메이션의 animation-play-state 효과를 사용한다 기본값은 running (애니메이션 동작) paused 값을 주면 애니메이션이 중지된다. 아래 결과는 애니메이션 효과를 주고, 마우스를 hover하면 animation-play-state : paused 값을 주도록 만들었다. 결과를 보면 마우스를 올리면 올린 원만 애니메이션이 중지되고, 나머지는 계속해서 애니메이션을 반복하다가 마우스를 떼면 중지된 부분에서 재시작하기 때문에 다른 원들과 다르게 움직이는 것을 볼 수 있다. .box:hover{ animation-play-state:paused; } See the Pen animation paused by gahy.. 2019. 5. 28. [CSS]CSS만을 이용해서 차트 그리기 [CSS] - [CSS]그라디언트를 이용해 간단하게 원형차트/도넛차트 그리기(애니메이션으로 차트그리기 ) 이전에 그라디언트를 이용해 원형 차트를 그렸었다. 이건 원형으로 그릴 수 있지만, 애니메이션 효과를 내기위해서는 스크립트를 이용해야한다.. 그럼 완전 CSS만을 이용해서 차트를 그릴 수도 있다. 하지만 반원만 가능하다.. 그려진 반원을 영역밖에 두었다가 rotateZ를 이용해 돌려서 그려지는 것처럼 보이기 때문이다. .chart-skills 의 overflow : hidden을 지워보면 어떻게 움직이는지 알 수 있다. See the Pen css - chart by gahyun (@gahyun) on CodePen. [javascript] - [자바스크립트플러그인]도넛 차트 그려주는 플러그인 2019. 5. 24. [CSS] 다양한 레이아웃을 이용해 반응형 게시판 양식만들기 (table / grid / ul li / flex) See the Pen layout by gahyun (@gahyun) on CodePen. 2019. 5. 23. 이전 1 ··· 3 4 5 6 7 8 다음 728x90 반응형