도연2 0

세번째 트게더 꾸미기 도움글 

배경에 흩날리는 눈이나 꽃이나 캐릭터나 이것저것 넣는법입니다. 

animation 에 대해 알아야하지만,

그건 다음번에 설명하도록 하고 예시 코드를 올려놓았습니다. 

url 위치에 크기를 적당하게 해놓은 png 눈 모양이나 꽃 모양으로 변경하여 사용하시면 됩니다 ! 

10s 는 시간을 뜻하는 부분이니 조절하여 써주세요 ~ 

/*전체 배경색을 지정*/

html {

background: linear-gradient(to bottom, #fffcb9, #ffd4cd, #ffa48c, #ffa48c);

  height: auto !important;

}

body {

letter-spacing: -0.05em !important;

  background: transparent;

  font-family: 'Jua', sans-serif;

/*아래는 눈 효과를 위해서*/

    background-image: url('https://cdn.discordapp.com/attachments/499752918086320130/553844830699126795/stars.png'), url('https://cdn.discordapp.com/attachments/499752918086320130/553844828333670411/stars2.png');

    -webkit-animation: snow 10s linear infinite;

    -moz-animation: snow 10s linear infinite;

    -ms-animation: snow 10s linear infinite;

    animation: snow 10s linear infinite;

}

/* 눈 내리는 효과 설정 CSS 파일 맨 아래에 추가*/

@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;}

}