지니가는사람 0

트게더 css 배경에 눈 내리는 효과, 이미지 적용하기 입니다.

순서 따라서 하시면 가능합니다~ 

참고로 이번 코드에는 이미지 제작이 필요하기 때문에 이미지 제작 툴에 해당하는 일러스트, 포토샵 등을 사용하셔야 합니다.

참고로 포토샵 cs6 버전을 이용하여 작성한 게시글입니다.

0. 시작하기 전에 배경에 눈 내리는 효과 이미지는 반복 패턴으로 움직이는 이미지 입니다. 이를 잘 기억하셔서 이미지를 잘 만드셔야 합니다.

1. 새로 만들기에서 이미지 크기 500 * 500 px 사이즈로 캠퍼스를 만든다. (추천 사이즈입니다. 편한 사이즈로 만드시면 됩니다.)

2. 레이어를 총 3개 정도 생성한 뒤에 배경은 투명화를 하고 배경에 움직이게 할 이미지를 가져와 사용할 부분을 편집한다.

3. 사용할 이미지가 없다면 포토샵 사용자 정의 도구에 있는 다양한 이미지를 응용하여 배치한다.

4. 레이어를 잘 나누어 각각 이미지 파일 3종을 저장한다. 저장할때는 꼭 png 파일로 저장하시는게 좋습니다.

5. 휴게더 처럼 움직이는 이미지로 눈 내리는 효과를 쓰고자 한다면 포토샵 타임라인 기능을 이용하여 만드신 뒤에 파일 -> 웹용으로 저장  한다.

6. 디스코드 서버를 하나 만든 다음 해당 서버 채팅 채널에 만든 이미지 3종(1~2가지 혹은 4가지 이상도 상관없습니다.)을 올린다.

7. 링크를 복사한 다음 아래 /* 1 */ /* 2 */ /* 3 */ 부분을 지우고 해당 위치에 추가한다.

8. snow 10s 라고 되어 있는 부분은 이미지가 움직이는 시간입니다. 시간은 자유롭게 바꾸시면 됩니다.

9. 만들어진 css 코드를 배경 이미지 css 코드 다음에 붙여넣기 한다.

-------------------------------------------------------------------------------------------------

body {

background-image: url('/* 1 */'),url('/* 2 */'),url('/* 3 */');

-webkit-animation: snow 10s linear infinite;

-moz-animation: snow 10s linear infinite;

-ms-animation: snow 10s linear infinite;

animation: snow 10s linear infinite;

}

@keyframes snow {

0% {background-position: 0px 0px, 0px 0px, 0px 0px;}

100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}

}

@-moz-keyframes snow {

0% {background-position: 0px 0px, 0px 0px, 0px 0px;}

100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}

}

@-webkit-keyframes snow {

0% {background-position: 0px 0px, 0px 0px, 0px 0px;}

50% {}

100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}

}

@-ms-keyframes snow {

0% {background-position: 0px 0px, 0px 0px, 0px 0px;}

100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}

}

-------------------------------------------------------------------------------------------------

여러분의 예쁜 트게더 꾸미기를 응원합니다~

질문은 댓글로 남겨주시면 시간 있을 때 답장 or 추가 포스팅 해드리니 부담 없이 물어보세요~