본문 바로가기

IT/Web

눈내리는 효과 CSS 적용하기(Letitsnow)

/* written by kaspyx (kaspyx@gmail.com) */

 

웹페이지를 디자인할때 간혹 눈내리는 효과 적용이 필요할때가 있다.

CSS로 효과를 적용하면 Javascript 보다 메모리와 연산을 상당히 적게 잡으므로 특정 세밀한 기능구현이 필요없다면 CSS를 활용하는것이 매우 유용하다.

특히 HTML 문서에서 외부 CSS 템플릿을 참조하여 가져다 쓰면 문서에 문서에 효과를 붙였다가 빼는것을 쉽게 적용할수있는 모듈화가 가능하다.

문내리는 CSS효과는 비록 내가 만든것은 아니지만, 유용한 CSS가 있어서 블로그 하였다.

letitsnow.tar
0.03MB

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<link rel="stylesheet" media="screen" href="style.css" />
<title>Let it Snow</title>
</head>
<body>
<div id="container">
<h2>Let it snow</h2>
</div>
</body>
</html>

여기서 style.css와 받은 파일 snow.png, snow2.png, snow3.png 는 같은 경로상에 있어야한다. (아니면 디렉토리를 만들어서 상대 경로 지정을 해줘도 된다.)

출처

https://designshack.net/articles/css/make-it-snow-on-your-website-with-css-keyframe-animations/