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

순수 css로 만든 로딩 아이콘 애니메이션 효과입니다. css로 만든 로딩바 애니메이션으로 다양한 효과를 선택해서 쓰면 됩니다.

HTML5로 제작된 애니메이션효과로 열기를 표현한 자료입니다. 특정테마나 이벤트 페이지 제작에 도움이 될듯합니다. 이미지라서 보이지는 않지만 엔진에서 뿜어내는 열기를 표현하였으며 요리에서 올라오는 열기 아프리카 대륙의 열기를 표현하였습니다. 자세한 사용방법은 https://tympanus.net/codrops/2016/05/03/animated-heat-distortion-effects-webgl/ 링크에서 사용방법을 확인하실 수 있으며. 데모확인과 자료를 다운 받으실 수 있습니다.

디자인 패턴은 둥근 “Inset”형태 디자인의 “Material design ‘ 과 ‘Material design small ‘, 박스 타입의”Box ” 약간의 애니메이션 된’Flex ‘나’Bubble ‘등 총 11 가지가되고 있으며, 다양한 효과들이 잘 구성되어 있고 와 이런 식으로매우 간단합니다. 실제 표시와 움직임의 확인은 다음과 같이 CodePen 데모에서 확인할 수 있도록되어 있습니다.

CSS와 HTML을 이용하여 일반버튼에 마우스오버시 애니메이션을 적용한듯한 효과를 낼 수 있습니다. 메뉴마다의 버튼에 마우스를 올릴때마다 각자의 다른 효과를 확인하실 수 있습니다. 해당 효과의 소스는 바로위창에서 확인 가능합니다.