DIR : /home/kozerus/public_html/jkwii/js/jsdoit/jsdoit20_girl_fmdm/style.css

/home/kozerus/public_html/jkwii/js/jsdoit/jsdoit20_girl_fmdm

body,div,p{
margin:0;
padding:0;
}
#stage{
position:relative;
width:442px;
height:402px;
padding:20px 0;
border:solid 1px #111;
background:url(http://jsdo-it-static-contents.s3.amazonaws.com/assets/y/g/l/C/yglCW.jpg) left top no-repeat;
text-align:center;
overflow:hidden;
}
#stage.start{background:url(http://jsdo-it-static-contents.s3.amazonaws.com/assets/h/n/o/B/hnoBk.jpg) left top no-repeat;}
#stage.start .effect02{
display:block;
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
margin-top:-100px;
margin-left:-100px;
background:-webkit-gradient(radial,center center, 0,center center, 200, from(#fff),color-stop(0.16, #beed9e),color-stop(0.32, #71b46c),color-stop(0.48, #4f8741),color-stop(0.6, #41662a),color-stop(0.76, #3e4b15),to(#3f4c16));
-webkit-box-shadow: rgba(255,255,255,0.95) 0 0 30px;
-webkit-border-radius:100px;
-webkit-animation: effect02 7s 1 ease-in-out;
background:-moz-radial-gradient(center center, circle,#fff,#beed9e 16%,#71b46c 32%,#4f8741 48%,#41662a 64%,#3e4b15 78%,#3f4c16);
-moz-box-shadow: rgba(255, 255, 255, 0.95) 0 0 30px;
-moz-border-radius:100px;
-moz-animation: effect02 7s 1 ease-in-out;
opacity:0;
}
#stage.start .effect>.pic01:before,
#stage.start .effect>.pic01:after,
#stage.start .effect>.pic02:before,
#stage.start .effect>.pic02:after,
#stage.start .effect>.pic03:before,
#stage.start .effect>.pic03:after{
content:"";
display:block;
position:absolute;
}
#stage.start .effect>.pic01:before,
#stage.start .effect>.pic01:after,
#stage.start .effect>.pic01,
#stage.start .effect>.pic02:before,
#stage.start .effect>.pic02:after,
#stage.start .effect>.pic02,
#stage.start .effect>.pic03:before,
#stage.start .effect>.pic03:after,
#stage.start .effect>.pic03{
display:block;
position:absolute;
top:-20px;
width:16px;
height:16px;
background:-webkit-gradient(radial,center center, 0,center center, 10, from(#fff),color-stop(0.16, #beed9e),color-stop(0.32, #71b46c),color-stop(0.48, #4f8741),color-stop(0.6, #41662a),color-stop(0.76, #3e4b15),to(#3f4c16));
-webkit-box-shadow: rgba(255,255,255,0.5) 0 0 5px;
-webkit-animation: effect01 5s 1 ease-in-out;
background:-moz-radial-gradient(center center, circle,#fff,#beed9e 16%,#71b46c 32%,#4f8741 48%,#41662a 64%,#3e4b15 78%,#3f4c16);
-moz-box-shadow: rgba(255,255,255,0.5) 0 0 5px;
-moz-animation: effect01 5s 1 ease-in-out;
opacity:0.85;
}
#stage.start .effect>.pic01:before,
#stage.start .effect>.pic01:after,
#stage.start .effect>.pic01{
left:200px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
}
#stage.start .effect>.pic02:before,
#stage.start .effect>.pic02:after,
#stage.start .effect>.pic02{
left:40px;
margin-top:-30px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
}
#stage.start .effect>.pic03:before,
#stage.start .effect>.pic03:after,
#stage.start .effect>.pic03{
left:240px;
width:14px;
height:14px;
margin-top:-30px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}
#stage.start .effect>.pic01:before{
width:10px;
height:10px;
margin-top:10px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
left:-80px;
}
#stage.start .effect>.pic01:after{
width:6px;
height:6px;
margin-top:-30px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
left:80px;
}
#stage.start .effect>.pic02:before{
width:10px;
height:10px;
margin-top:-40px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
left:80px;
}
#stage.start .effect>.pic02:after{
width:6px;
height:6px;
margin-top:30px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
left:280px;
}
#stage.start .effect>.pic03:before{
width:10px;
height:10px;
margin-top:-40px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
left:80px;
}
#stage.start .effect>.pic03:after{
width:6px;
height:6px;
margin-top:30px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
left:120px;
}
#ctrl {margin-top: 30px;}
#stage.start #enemy img{
-webkit-animation: effect03 9s 1 linear;
-moz-animation: effect03 9s 1 linear;
}
/**
 * ---------------------------------------------------
 *  Definition of animation.
 * ---------------------------------------------------
 */
@-webkit-keyframes effect01{
    0% {top:400px;}
    10%{-webkit-transform: translate(2px) scale(1.1);opacity:0.65;}
    20%{-webkit-transform: translate(-2px);opacity:0.85;}
    30%{-webkit-transform: translate(2px) scale(1.1);opacity:0.65;}
    40%{-webkit-transform: translate(-2px);opacity:0.85;}
    50%{-webkit-transform: translate(2px) scale(1.1);opacity:0.65;}
    60%{-webkit-transform: translate(-2px);opacity:0.85;}
    80%{top:150px;opacity:0.85;}
    100% {top:4px;opacity:0;-webkit-transform: translate(0) scale(0.5);}
}
@-moz-keyframes effect01{
    0% {top:400px;}
    10%{-moz-transform: translate(2px) scale(1.1);opacity:0.65;}
    20%{-moz-transform: translate(-2px);opacity:0.85;}
    30%{-moz-transform: translate(2px) scale(1.1);opacity:0.65;}
    40%{-moz-transform: translate(-2px);opacity:0.85;}
    50%{-moz-transform: translate(2px) scale(1.1);opacity:0.65;}
    60%{-moz-transform: translate(-2px);opacity:0.85;}
    80%{top:150px;opacity:0.85;}
    100% {top:4px;opacity:0;-moz-transform: translate(0) scale(0.5);}
}
@-webkit-keyframes effect02{
    0% {-webkit-transform: translate(2px) scale(0);}
    70% {-webkit-transform: translate(2px) scale(0);}
    71% {-webkit-transform: translate(2px) scale(4); opacity: 0.95;}
    100% {-webkit-transform: translate(2px) scale(0); opacity: 0.45;}
}
@-moz-keyframes effect02{
    0% {-moz-transform: translate(2px) scale(0);}
    70% {-moz-transform: translate(2px) scale(0);}
    71% {-moz-transform: translate(2px) scale(4); opacity: 0.95;}
    100% {-moz-transform: translate(2px) scale(0); opacity: 0.45;}
}
@-webkit-keyframes effect03{
 77%{-webkit-transform: translate(0px) scale(1); opacity:1;}
    78%{-webkit-transform: translate(2px) scale(1.1); opacity: 0.5;}
    79%{-webkit-transform:scale(1); opacity: 1;}
    80%{-webkit-transform: translate(-2px) scale(1.1); opacity: 0.5;}
    81%{-webkit-transform:scale(1); opacity: 1;}
    82%{-webkit-transform: translate(2px) scale(1.1); opacity: 0.5;}
    83% {-webkit-transform:scale(1); opacity: 1;}
    84%{-webkit-transform: translate(-2px) scale(1.1); opacity: 0.5;}
    85%{-webkit-transform:scale(1); opacity: 1;}
    86%{-webkit-transform: translate(2px) scale(1.1); opacity: 0.5;}
    87%{opacity: 1;}
}
@-moz-keyframes effect03{
 77%{-moz-transform: translate(0px) scale(1); opacity:1;}
    78%{-moz-transform: translate(2px) scale(1.1); opacity: 0.5;}
    79%{-moz-transform:scale(1); opacity: 1;}
    80%{-moz-transform: translate(-2px) scale(1.1); opacity: 0.5;}
    81%{-moz-transform:scale(1); opacity: 1;}
    82%{-moz-transform: translate(2px) scale(1.1); opacity: 0.5;}
    83% {-moz-transform:scale(1); opacity: 1;}
    84%{-moz-transform: translate(-2px) scale(1.1); opacity: 0.5;}
    85%{-moz-transform:scale(1); opacity: 1;}
    86%{-moz-transform: translate(2px) scale(1.1); opacity: 0.5;}
    87%{opacity: 1;}
}