웹솔루션개발 25년 노하우! 해피CGI의 모든것

CSS만으로 로딩이미지를 쉽게 만들 수 있습니다. gif애니메이션의 로딩이미지를 별도로 제작할 필요 없이 CSS만으로 쉽게 사용이 가능해 간편합니다. 준비할것은 8컷의 로딩이미지가 담긴 PNG1장 입니다. 아래와 같이 html상에는 loader라는 클래스명을 지정하여 줍니다. html Loading… 그리고 나서, 아래와 같이 CSS 를 선언하여 줍니다. 아래에 infinite steps(8)값을 바꿔보면 아시겠지만, 위에서 만든 PNG1장을 8칸으로 나누어 애니메이션처럼 보여지게 한다보면 됩니다. CSS @keyframes loader { to { background-position: -800px 0; } } .loader { width: 100px; height: 100px; text-indent: ..

CSS의 속성을 통해 애니메이션을 제작할 수 있지만, 능숙하게 다루는 사람이 아니면 쉽게 애니메이션을 만들기 어렵다. 이러한 사람들을 위해 만들어진 사이트로, 손쉽게 애니메이션을 구현 해 낼 수 있도록 마련한 웹사이트로, 크롬에서 접속시 사용이 가능하다. http://Keyframes.app