에이다웡 마이피

[그냥저냥이야기] 82016.08.29 PM 12:09

스타일 시트 (CSS)

.topNone
{
display: none;
}
.snow-basic
{
/z-inde/: 999999;
p-osition: fixed;
top: -200px;
opacity: 0;
-webkit-user-select: none;
backface-visibility: visible;
}

.snow-basic img
{
width: 100%;
height: auto;
border: 0px;
opacity: 1;
}

#snow-flake1{ width: 31px; height: 31px; left: 79%; animation: SuperSnowFlake_l 20s 0s infinite; }
#snow-flake2{ width: 23px; height: 23px; left: 91%; animation: SuperSnowFlake_l 25s 0s infinite; }
#snow-flake3{ width: 20px; height: 20px; left: 4%; animation: SuperSnow_r 9s 1s infinite;  }
#snow-flake4{ width: 44px; height: 44px; left: 19%; animation: SuperSnow_l 21s 1s infinite;  }
#snow-flake5{ width: 49px; height: 49px; left: 86%; animation: SuperSnow_l 23s 2s infinite;  }
#snow-flake6{ width: 40px; height: 40px; left: 5%; animation: SuperSnowFlake_l 21s 2s infinite; }
#snow-flake7{ width: 11px; height: 11px; left: 79%; animation: SuperSnow_l 10s 3s infinite;  }
#snow-flake8{ width: 35px; height: 35px; left: 38%; animation: SuperSnowFlake_r 9s 3s infinite; }
#snow-flake9{ width: 25px; height: 25px; left: 31%; animation: SuperSnow_r 17s 4s infinite;  }
#snow-flake10{ width: 29px; height: 29px; left: 9%; animation: SuperSnow_r 16s 5s infinite;  }
#snow-flake11{ width: 32px; height: 32px; left: 47%; animation: SuperSnow_l 24s 6s infinite;  }
#snow-flake12{ width: 36px; height: 36px; left: 4%; animation: SuperSnow_r 22s 7s infinite;  }
#snow-flake13{ width: 46px; height: 46px; left: 25%; animation: SuperSnowFlake_r 10s 8s infinite; }
#snow-flake14{ width: 48px; height: 48px; left: 86%; animation: SuperSnowFlake_r 16s 9s infinite; }
#snow-flake15{ width: 31px; height: 31px; left: 9%; animation: SuperSnow_l 20s 10s infinite;  }
#snow-flake16{ width: 44px; height: 44px; left: 16%; animation: SuperSnow_r 11s 0s infinite;  }
#snow-flake17{ width: 10px; height: 10px; left: 48%; animation: SuperSnow_l 11s 0s infinite;  }
#snow-flake18{ width: 42px; height: 42px; left: 43%; animation: SuperSnow_r 5s 0s infinite;  }
#snow-flake19{ width: 11px; height: 11px; left: 36%; animation: SuperSnowFlake_l 12s 2s infinite; }
#snow-flake20{ width: 45px; height: 45px; left: 17%; animation: SuperSnow_l 16s 1s infinite;  }
#snow-flake21{ width: 5px; height: 5px; left: 72%; animation: SuperSnow_r 12s 0s infinite;  }
#snow-flake22{ width: 39px; height: 39px; left: 64%; animation: SuperSnow_r 16s 0s infinite;  }
#snow-flake23{ width: 26px; height: 26px; left: 21%; animation: SuperSnow_l 20s 2s infinite;  }
#snow-flake24{ width: 22px; height: 22px; left: 7%; animation: SuperSnowFlake_l 23s 0s infinite; }
#snow-flake25{ width: 13px; height: 13px; left: 22%; animation: SuperSnow_l 21s 3s infinite;  }
#snow-flake26{ width: 39px; height: 39px; left: 59%; animation: SuperSnow_r 15s 2s infinite;  }
#snow-flake27{ width: 12px; height: 12px; left: 31%; animation: SuperSnow_r 7s 0s infinite;  }
#snow-flake28{ width: 21px; height: 21px; left: 22%; animation: SuperSnow_r 15s 1s infinite;  }
#snow-flake29{ width: 44px; height: 44px; left: 100%; animation: SuperSnowFlake_r 8s 0s infinite; }
#snow-flake30{ width: 46px; height: 46px; left: 100%; animation: SuperSnowFlake_l 7s 0s infinite; }
#snow-flake31{ width: 9px; height: 9px; left: 60%; animation: SuperSnowFlake_l 10s 1s infinite; }
#snow-flake32{ width: 12px; height: 12px; left: 93%; animation: SuperSnow_r 21s 0s infinite;  }
#snow-flake33{ width: 45px; height: 45px; left: 67%; animation: SuperSnow_l 20s 1s infinite;  }
#snow-flake34{ width: 43px; height: 43px; left: 3%; animation: SuperSnow_r 11s 1s infinite;  }
#snow-flake35{ width: 46px; height: 46px; left: 8%; animation: SuperSnow_l 7s 1s infinite;  }
#snow-flake36{ width: 36px; height: 36px; left: 57%; animation: SuperSnow_l 17s 0s infinite;  }
#snow-flake37{ width: 4px; height: 4px; left: 95%; animation: SuperSnowFlake_r 25s 1s infinite; }
#snow-flake38{ width: 42px; height: 42px; left: 42%; animation: SuperSnow_l 16s 1s infinite;  }
#snow-flake39{ width: 29px; height: 29px; left: 72%; animation: SuperSnow_l 20s 1s infinite;  }
#snow-flake40{ width: 11px; height: 11px; left: 15%; animation: SuperSnow_l 9s 1s infinite;  }
#snow-flake41{ width: 35px; height: 35px; left: 55%; animation: SuperSnow_l 14s 2s infinite;  }
#snow-flake42{ width: 34px; height: 34px; left: 79%; animation: SuperSnow_r 9s 1s infinite;  }
#snow-flake43{ width: 42px; height: 42px; left: 24%; animation: SuperSnowFlake_l 20s 4s infinite; }
#snow-flake44{ width: 41px; height: 41px; left: 86%; animation: SuperSnow_r 8s 0s infinite;  }
#snow-flake45{ width: 48px; height: 48px; left: 22%; animation: SuperSnowFlake_l 11s 1s infinite; }
#snow-flake46{ width: 32px; height: 32px; left: 84%; animation: SuperSnow_l 24s 4s infinite;  }
#snow-flake47{ width: 41px; height: 41px; left: 90%; animation: SuperSnow_r 23s 1s infinite;  }
#snow-flake48{ width: 45px; height: 45px; left: 31%; animation: SuperSnowFlake_l 10s 0s infinite; }
#snow-flake49{ width: 22px; height: 22px; left: 99%; animation: SuperSnowFlake_l 20s 2s infinite; }
#snow-flake50{ width: 10px; height: 10px; left: 95%; animation: SuperSnowFlake_l 12s 0s infinite; }

@keyframes SuperSnow_l {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; transform:translate3D(500px,1500px,0) rotate(250deg);}}
@keyframes SuperSnow_r {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; transform:translate3D(-500px,1500px,0) rotate(-500deg);}}
@-webkit-keyframes SuperSnow_l {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -webkit-transform:translate3D(500px,1500px,0) rotate(250deg);}}
@-webkit-keyframes SuperSnow_r {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -webkit-transform:translate3D(-500px,1500px,0) rotate(-500deg);}}
@-moz-keyframes SuperSnow_l {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -moz-transform:translate3D(500px,1500px,0) rotate(250deg);}}
@-moz-keyframes SuperSnow_r {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -moz-transform:translate3D(-500px,1500px,0) rotate(-500deg);}}
@-ms-keyframes SuperSnow_l {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -ms-transform:translate3D(500px,1500px,0) rotate(250deg);}}
@-ms-keyframes SuperSnow_r {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -ms-transform:translate3D(-500px,1500px,0) rotate(-500deg);}}
@keyframes SuperSnowFlake_l {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; transform:translate3D(500px,1500px,0) rotateY(720deg) rotate(250deg);}}
@keyframes SuperSnowFlake_r {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; transform:translate3D(-500px,1500px,0) rotateY(-720deg) rotate(-500deg);}}
@-webkit-keyframes SuperSnowFlake_l {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -webkit-transform:translate3D(500px,1500px,0) rotateY(720deg) rotate(250deg);}}
@-webkit-keyframes SuperSnowFlake_r {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -webkit-transform:translate3D(-500px,1500px,0) rotateY(-720deg) rotate(-500deg);}}
@-moz-keyframes SuperSnowFlake_l {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -moz-transform:translate3D(500px,1500px,0) rotateY(720deg) rotate(250deg);}}
@-moz-keyframes SuperSnowFlake_r {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -moz-transform:translate3D(-500px,1500px,0) rotateY(-720deg) rotate(-500deg);}}
@-ms-keyframes SuperSnowFlake_l {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -ms-transform:translate3D(500px,1500px,0) rotateY(720deg) rotate(250deg);}}
@-ms-keyframes SuperSnowFlake_r {0% {opacity:0;} 25% {opacity:1;} 100% {opacity:0; -ms-transform:translate3D(-500px,1500px,0) rotateY(-720deg) rotate(-500deg);}}

상단 배경

댓글 : 0 개

user error : Error. B.