728x90 반응형 CSS/CSS 응용30 [CSS]animate steps를 이용해 타이핑 효과 내기 간단하게 타이핑 효과를 구현할 수 있다. See the Pen 글자 타이핑 효과 -css by gahyun (@gahyun) on CodePen. width를 steps로 늘려가는 애니메이션 효과로 타이핑느낌을 낼 수 있다. 다만 일정한 width를 늘려가므로 띄어쓰기나 .과 같은 특수문자가 문장 중간에 끼여있다면 조금 어색한 느낌이 나거나 잘려나오는 효과가 나타날 수 있다. 좀더 정확하게 구현하고 싶다면 자바스크립트를 이용해 구현할 수 있다 [javascript] - [JAVASCRIPT/JQUERY] 글자 타이핑 효과 2019. 5. 22. [CSS]그라디언트를 이용해 간단하게 원형차트/도넛차트 그리기(애니메이션으로 차트그리기 ) See the Pen chart-animation3 by gahyun (@gahyun) on CodePen. conic-gradient를 이용해 원형차트 그리기 background: conic-gradient(#8b22ff 0% 25%, #ffc33b 25% 56%, #21f3d6 56% 100%); %로 영역을 나누어 그라디언트를 이용해 배경을 칠하고, border-radius : 50% 를 이용해 원으로 만들면 원형 차트가된다. 가운데에 흰색으로 가려주면 도넛 차트도 그릴 수 있다. See the Pen chart by gahyun (@gahyun) on CodePen. css 차트 그리고 싶을때 애니메이션 효과 참고 keyframes를 이용해서 그라디언트를 조금씩 늘려준다. script 로는 set.. 2019. 5. 21. [CSS3]카드를 한장만 뒤집을 수 있는 카드 뒤집기 효과 구현하기 카드의 앞면과 뒷면을 겹쳐두고 rotate를 위용해 뒤집는것처럼 보이게 합니다. 뒷면은 처음부터 90도 돌려져있고 앞면이 90도 돌아가고 난 후 뒷면이 다시 90도 되돌아오면 뒤집어 지는것처럼 보입니다. 하나를 뒤집으면 뒤집어져있던 다른 카드는 다시 되돌아오도록 합니다. 이때 다시 원위치로 되돌아오는 카드는 전체적으로 뒤면이 돌고 다시 앞면이 돌아나오는것이 아닌 뒷면이 없어지고 앞면이 돌아서 나오는듯하도록 구현합니다. See the Pen 카드뒤집기 효과 구현하기 by gahyun (@gahyun) on CodePen. 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. 이전 1 ··· 4 5 6 7 8 다음 728x90 반응형