728x90 반응형 CSS127 [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] 반응형 사이즈 단위 알아보기 (em/vw/vh/vmin/vmax) em 부모에 지정된 사이즈를 기준으로 1em이 된다. 현재 box에 font-size가 20px 로 지정되어있기 때문에 .fs1의 1em 은 20px 이 되고 2em은 40px이 되는 것이다. vw 창전체의 width값을 기준으로 100분의 1 크기가 1vw가 된다. 즉 100vw는 창 넓이 vh 창전체의 height값을 기준으로 100분의 1 크기가 1vh가 된다. 즉 100vh는 창 높이 See the Pen zQaqOQ by gahyun (@gahyun) on CodePen. See the Pen GaGZYx by gahyun (@gahyun) on CodePen. 다시한번 회색 박스 안의 사이즈로 em을 알아보자 자신의 부모영역에 지정된 크게의 비율로 지정되기 때문에 .box1 에 font-siz.. 2019. 5. 27. [SVG]텍스트 애니메이션 효과 관련 참고 사이트 https://bashooka.com/coding/20-cool-svg-text-effects/ 20 Cool SVG Text Effects – Bashooka SVG text is fully accessible, searchable, selectable and 100% semantic. So here are 20 amazing & cool SVG text effects that will give you ideas as a starting point for creating cool SVG content. bashooka.com [CSS/SVG] - [SVG]svg 시작해보기1 - 기본도형 그리기 [CSS/SVG] - [SVG]svg 시작해보기2 - path 도형그리기 [CSS/SVG] - [SVG]svg.. 2019. 5. 27. [SVG]svg시작해보기 4 - path그리기 애니메이션 stroke-dashoffset : 1000 stroke-dashoffset 이란 총 길이를 1000이라고 가정한다 아래는 5초동안 0에서 1000까지 그려지는 애니메이션 See the Pen svg ai path animation by gahyun (@gahyun) on CodePen. See the Pen hover svg by gahyun (@gahyun) on CodePen. 2019. 5. 27. 이전 1 ··· 14 15 16 17 18 19 20 ··· 32 다음 728x90 반응형