EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

.ic_motion{position:relative}
.ic_motion span{position:absolute;top:0;left:0;display:block;width:130px;height:130px;background-size:130px 130px;-webkit-background-size:130px 130px}
.sun{background:url(http://static.naver.net/m/weather/2013_new/ic/ic_sun_big.png) 0 0 no-repeat}

.wt_ic7{left:150px}
.cloud1{background:url(http://static.naver.net/m/weather/2013_new/ic/ic_cloud4.png) 0 0 no-repeat}
.cloud2{background:url(http://static.naver.net/m/weather/2013_new/ic/ic_cloud5.png) 0 0 no-repeat}
.cloud3{background:url(http://static.naver.net/m/weather/2013_new/ic/ic_cloud6.png) 0 0 no-repeat}

.wt_ic13{left:300px}
.snow_l{background:url(http://static.naver.net/m/weather/2013_new/ic/ic_bigsnow_01.png) 0 0 no-repeat;opacity:0}
.snow_l:nth-child(1){width:36px;height:38px;background-size:32px 33px;-webkit-background-size:36px 38px;left:27px;top:8px}
.snow_l:nth-child(2){width:26px;height:28px;background-size:26px 28px;-webkit-background-size:26px 28px; left:73px;top:14px;-webkit-animation-delay:0.5s}
.snow_l:nth-child(3){width:26px;height:28px;background-size:26px 28px;-webkit-background-size:26px 28px; left:13px;top:50px;-webkit-animation-delay:0.2s}
.snow_l:nth-child(4){width:36px;height:38px;background-size:38px 38px;-webkit-background-size:36px 38px; left:47px;top:44px;-webkit-animation-delay:0.8s}
.snow_l:nth-child(5){width:36px;height:38px;background-size:38px 38px;-webkit-background-size:36px 38px; left:87px;top:44px;-webkit-animation-delay:0.9s}
.snow_l:nth-child(6){width:36px;height:38px;background-size:33px 33px;-webkit-background-size:36px 38px; left:27px;top:80px;-webkit-animation-delay:0.3s}
.snow_l:nth-child(7){width:26px;height:28px;background-size:26px 28px;-webkit-background-size:26px 28px; left:73px;top:86px;-webkit-animation-delay:0.7s}

.wt_ic19{left:450px}
span.cloud{top:-4px}
.cloud{background:url(http://static.naver.net/m/weather/2013_new/ic/ic_cloud7.png) 0 0 no-repeat}
.hail:nth-child(2){left:20px;top:82px}
.hail:nth-child(3){left:37px;top:100px}
.hail:nth-child(4){left:53px;top:82px}
.hail:nth-child(5){left:70px;top:100px}
.hail:nth-child(6){left:86px;top:82px}
span.hail{width:18px;height:22px;background:url(http://static.naver.net/m/weather/2013_new/ic/ic_diamond.png) 0 0 no-repeat;background-size:18px 22px;-webkit-background-size:18px 22px;opacity:0}

/****************************** 애니메이션 ******************************/
/*해*/
span.sun{-webkit-animation: sunactive linear 30s infinite}

@-webkit-keyframes sunactive{
	0%{-webkit-transform:rotate(0deg)}
	100%{-webkit-transform:rotate(360deg)}
}

/*구름*/
span.cloud2{-webkit-animation:cloud2 ease-in-out 2s infinite alternate}
span.cloud3{top:-8px;-webkit-animation:cloud3 ease-in-out 2s infinite alternate}

@-webkit-keyframes cloud2{
    0%{-webkit-transform:translate(0px, 0px)}
    100%{-webkit-transform:translate(0px, 8px)}
}

@-webkit-keyframes cloud3{
    0%{-webkit-transform:translate(0px, 0px)}
    100%{-webkit-transform:translate(0px, -8px)}
}

/*눈*/
.snow_l:nth-child(2){-webkit-animation-delay:0.5s}
.snow_l:nth-child(3){-webkit-animation-delay:0.2s}
.snow_l:nth-child(4){-webkit-animation-delay:0.8s}
.snow_l:nth-child(5){-webkit-animation-delay:0.9s}
.snow_l:nth-child(6){-webkit-animation-delay:0.3s}
.snow_l:nth-child(7){-webkit-animation-delay:0.7s}

span.snow_l{-webkit-animation:snow_l linear 3s infinite}
@-webkit-keyframes snow_l{
    0%{-webkit-transform:translate(0px, -5px) rotate(0deg);opacity:0.01}
    16%{-webkit-transform:translate(0px, 0) rotate(40deg);opacity:1}
	82%{-webkit-transform:translate(0px, 12px)  rotate(120deg);opacity:0.01}
	100%{-webkit-transform:translate(0px, 12px)  rotate(120deg);opacity:0.01}
}

/*우박*/
.hail:nth-child(2){-webkit-animation-delay:0.6s}
.hail:nth-child(4){-webkit-animation-delay:0.3s}
.hail:nth-child(5){-webkit-animation-delay:0.9s}
.hail:nth-child(6){-webkit-animation-delay:1.2s}
span.hail{-webkit-animation:rain_s ease 2s infinite}

@-webkit-keyframes rain_s{
    0%{-webkit-transform:translate(0px, -5px);opacity:0.01}
    25%{-webkit-transform:translate(0px, 0);opacity:1}
	75%{-webkit-transform:translate(0px, 20px);opacity:0.01}
	100%{-webkit-transform:translate(0px, 20px);opacity:0.01}
}

HTML

Recommendation

Join Effecthub.com