Forked from: edo_m18's CSSで必殺技！ diff(1129)

forked: CSSで必殺技！第4弾! 最終型

panicdragon

2011-12-15 10:11:28

License: MIT License

Fork: 0

Fav: 12

View: 2174

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 10 lines
HTML 67 lines
CSS 994 lines

forked: CSSで必殺技！第4弾! 最終型
jQuery v1.6.2

<div id="stage">
    <div class="inner">
      <div class="endBg"><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
      <div id="enemy"><img src="http://jsdo-it-static-contents.s3.amazonaws.com/assets/f/j/f/h/fjfhR.png" alt="" /></div>
      <div class="heart"></div>
      <div class="effect">
        <span class="pic01"></span><span class="pic02"></span><span class="pic03"></span>
      </div>   
      <div class="effect02">
        <span class="pic01"></span><span class="pic02"></span><span class="pic03"></span>
      </div>    
      <div class="effect03">
        <span class="pic01"></span><span class="pic02"></span><span class="pic03"></span>
      </div>    
      <div class="effect04">
        <span class="pic01"></span><span class="pic02"></span><span class="pic03"></span>
      </div>
      
      <div class="damage d01">208</div>
      <div class="damage d02">247</div>
      <div class="damage d03">138</div>
      <div class="damage d04">99999</div>
      
      <div class="pwrGg"><span></span></div>
      
      <div id="ctrl">
	    <button class="attack">攻撃！</button>
        <button class="reset">リセット</button>
      </div>
      <div class="ctrl02"><a href="#" class="reset">reset</a></div>
      
      <div class="attackName name01">
        <p>Thunder Ball</p>
      </div> 
      <div class="attackName name02">
        <p>Black Hole</p>
      </div>
      <div class="attackName thankyou">
        <p>Thank you</p>
      </div>
      
      <div class="combo cmb01">1<span>combo</span></div>
      <div class="combo cmb02">2<span>combo</span></div>
      <div class="combo cmb03">3<span>combo</span></div>
      <div class="combo cmb04">4<span>combo</span></div>
      <div class="combo cmb05">5<span>combo</span></div>
      <div class="combo cmb06">6<span>combo</span></div>
      <div class="combo cmb07">7<span>combo</span></div>
      <div class="combo cmb08">8<span>combo</span></div>
      <div class="combo cmb09">9<span>combo</span></div>
      <div class="combo cmb10">10<span>combo</span></div>
      <div class="combo cmb11">11<span>combo</span></div>
      <div class="combo cmb12">12<span>combo</span></div>
      <div class="combo cmb13">13<span>combo</span></div>
      <div class="combo cmb14">14<span>combo</span></div>
      <div class="combo cmb15">15<span>combo</span></div>
      <div class="combo cmb16">16<span>combo</span></div>
      <div class="combo cmb17">17<span>combo</span></div>
      <div class="combo cmb18">18<span>combo</span></div>
      <div class="combo cmbxx">xx<span>combo</span></div>  
      <div class="combo win">You Win!!!</div>
      
      <div class="holeWrap">
        <div class="hole"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
      </div>
  </div>
</div>

forked: CSSで必殺技！第4弾! 最終型

body,div,p{
margin:0;
padding:0;
font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana;
}
#stage{
position:relative;
width:442px;
height:402px;
text-align:center;
overflow:hidden;
}
.inner{
position:absolute;
width:442px;
height:402px;
padding:20px 0;
background:url(http://jsdo-it-static-contents.s3.amazonaws.com/assets/y/g/l/C/yglCW.jpg) left top no-repeat;
border:solid 1px #111;
}
#stage.start{
-webkit-animation: effect0 7s 1 linear;
}
#stage.start .inner{
background:url(http://jsdo-it-static-contents.s3.amazonaws.com/assets/h/n/o/B/hnoBk.jpg) left top no-repeat;
-webkit-animation: effect00 1s 40 linear 7s;
}
#stage.start .effect04 .pic01,
#stage.start .effect04 .pic02,
#stage.start .effect04 .pic03{
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: effect04 4s 6 ease-in-out 6s;
opacity:0;
z-index:10;
}
#stage.start .effect04 .pic02{
margin-top:-210px;
margin-left:-100px;
-webkit-animation: effect05 4s 6 ease-in-out 7s;
}
#stage.start .effect04 .pic03{
margin-top:-130px;
margin-left:-150px;
-webkit-animation: effect06 4s 6 ease-in-out 9s;
}
#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,
#stage.start .effect02>.pic01:before,
#stage.start .effect02>.pic01:after,
#stage.start .effect02>.pic02:before,
#stage.start .effect02>.pic02:after,
#stage.start .effect02>.pic03:before,
#stage.start .effect02>.pic03:after,
#stage.start .effect03>.pic01:before,
#stage.start .effect03>.pic01:after,
#stage.start .effect03>.pic02:before,
#stage.start .effect03>.pic02:after,
#stage.start .effect03>.pic03:before,
#stage.start .effect03>.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,
#stage.start .effect02>.pic01:before,
#stage.start .effect02>.pic01:after,
#stage.start .effect02>.pic01,
#stage.start .effect02>.pic02:before,
#stage.start .effect02>.pic02:after,
#stage.start .effect02>.pic02,
#stage.start .effect02>.pic03:before,
#stage.start .effect02>.pic03:after,
#stage.start .effect02>.pic03,
#stage.start .effect03>.pic01:before,
#stage.start .effect03>.pic01:after,
#stage.start .effect03>.pic01,
#stage.start .effect03>.pic02:before,
#stage.start .effect03>.pic02:after,
#stage.start .effect03>.pic02,
#stage.start .effect03>.pic03:before,
#stage.start .effect03>.pic03:after,
#stage.start .effect03>.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;
opacity:0.85;
-webkit-animation: effect01 6s 4 ease-in 7s;
z-index:10;
}
#stage.start .effect02>.pic01:before,
#stage.start .effect02>.pic01:after,
#stage.start .effect02>.pic01,
#stage.start .effect02>.pic02:before,
#stage.start .effect02>.pic02:after,
#stage.start .effect02>.pic02,
#stage.start .effect02>.pic03:before,
#stage.start .effect02>.pic03:after,
#stage.start .effect02>.pic03{
-webkit-animation: effect02 6s 4 ease-in 7s;
}
#stage.start .effect03>.pic01:before,
#stage.start .effect03>.pic01:after,
#stage.start .effect03>.pic01,
#stage.start .effect03>.pic02:before,
#stage.start .effect03>.pic02:after,
#stage.start .effect03>.pic02,
#stage.start .effect03>.pic03:before,
#stage.start .effect03>.pic03:after,
#stage.start .effect03>.pic03{
-webkit-animation: effect03 6s 4 ease-in 7s;
}
#stage.start .effect>.pic01:before,
#stage.start .effect>.pic01:after,
#stage.start .effect>.pic01{
left:200px;
-webkit-border-radius:8px;
}
#stage.start .effect02>.pic01:before,
#stage.start .effect02>.pic01:after,
#stage.start .effect02>.pic01{
left:100px;
-webkit-border-radius:8px;
}
#stage.start .effect03>.pic01:before,
#stage.start .effect03>.pic01:after,
#stage.start .effect03>.pic01{
left:100px;
-webkit-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;
}
#stage.start .effect02>.pic02:before,
#stage.start .effect02>.pic02:after,
#stage.start .effect02>.pic02{
left:18px;
margin-top:-10px;
-webkit-border-radius:8px;
}
#stage.start .effect03>.pic02:before,
#stage.start .effect03>.pic02:after,
#stage.start .effect03>.pic02{
left:18px;
margin-top:-10px;
-webkit-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;
}
#stage.start .effect02>.pic03:before,
#stage.start .effect02>.pic03:after,
#stage.start .effect02>.pic03{
left:210px;
width:10px;
height:10px;
margin-top:-50px;
-webkit-border-radius:5px;
}
#stage.start .effect03>.pic03:before,
#stage.start .effect03>.pic03:after,
#stage.start .effect03>.pic03{
left:290px;
width:10px;
height:10px;
margin-top:-40px;
-webkit-border-radius:5px;
}
#stage.start .effect>.pic01:before,
#stage.start .effect02>.pic01:before,
#stage.start .effect03>.pic01:before{
width:10px;
height:10px;
margin-top:10px;
-webkit-border-radius:5px;
left:-80px;
}
#stage.start .effect>.pic01:after,
#stage.start .effect02>.pic01:after,
#stage.start .effect03>.pic01:after{
width:6px;
height:6px;
margin-top:-30px;
-webkit-border-radius:3px;
left:80px;
}
#stage.start .effect>.pic02:before,
#stage.start .effect02>.pic02:before,
#stage.start .effect03>.pic02:before{
width:10px;
height:10px;
margin-top:-40px;
-webkit-border-radius:5px;
left:80px;
}
#stage.start .effect>.pic02:after,
#stage.start .effect02>.pic02:after,
#stage.start .effect03>.pic02:after{
width:6px;
height:6px;
margin-top:30px;
-webkit-border-radius:3px;
left:280px;
}
#stage.start .effect>.pic03:before,
#stage.start .effect02>.pic03:before,
#stage.start .effect03>.pic03:before{
width:10px;
height:10px;
margin-top:-40px;
-webkit-border-radius:5px;
left:80px;
}
#stage.start .effect>.pic03:after,
#stage.start .effect02>.pic03:after,
#stage.start .effect03>.pic03:after{
width:6px;
height:6px;
margin-top:30px;
-webkit-border-radius:3px;
left:120px;
}
#ctrl {margin-top:10px;}
#stage.start #enemy img{
position:relative;
-webkit-animation: effect07 4s 6 linear 8s;
z-index:5;
}
#stage.start #enemy{
position:relative;
-webkit-animation: enemy 20s 1 ease-in-out 42s;
z-index:5;
}
.attackName{display:none;}
#stage.start .attackName{
display:block;
position:absolute;
width:130px;
bottom:66px;
right:-135px;
padding:2px 0 0;
font-size:14px;
color:#fff;
background:#000;
opacity:0.63;
}
.attackName.name01{-webkit-animation: attckname01 26s 1 ease-in 7s;}
.attackName.name02{-webkit-animation: attckname01 18s 1 ease-in 33s;}
.attackName.thankyou{
-webkit-animation: attckname01 20s 1 ease-in 65s;
z-index:15;
}
.damage{
position:absolute;
color:#e00;
font-size:36px;
font-weight:bold;
font-family: Helvetica;
opacity:0;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0%,#fff),
color-stop(49%,#e05a5a),
color-stop(50%,#cd2e2e),
color-stop(100%,#ce2121));
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
z-index:10;
}
#stage.start .d01{
top:199px;
left:186px;
-webkit-animation: damage 4s 6 ease-out 10s;
}
#stage.start .d02{
top:85px;
left:203px;
-webkit-animation: damage 4s 6 ease-out 11s;
}
#stage.start .d03{
top:175px;
left:125px;
-webkit-animation: damage 4s 6 ease-out 13s;
}
#stage.start .d04{
font-size:48px;
top:202px;
left:150px;
-webkit-animation: damage 4s 1 ease-out 50s;
}
.pwrGg{
position:absolute;
bottom:100px;
left:30px;
width:85%;
border:#fff 2px solid;
height:8px;
-webkit-border-radius:6px;
}
.pwrGg>span{
display: block;
width:100%;
height:8px;
background:#e00;
-webkit-border-radius:6px;
}
#stage.start .pwrGg>span{
width:0%;
-webkit-animation:pwrGg 70s 1 linear;
}
.combo{
position:absolute;
right:-180px;
top:10px;
width:160px;
font-size:36px;
font-family:sans-serif;
font-weight:bold;
opacity:1;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0%,#fff),
color-stop(49%,#e05a5a),
color-stop(50%,#cd2e2e),
color-stop(100%,#ce2121));
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
-webkit-transform:skewX(-20deg);
border-bottom:#eee 1px solid;
text-align:left;
opacity:0;
}
.combo>span{
font-family:Helvetica;
font-size:24px;
letter-spacing:-2px;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0%,#eee),
color-stop(49%,#eee),
color-stop(50%,#ccc),
color-stop(100%,#ccc));
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}
#stage.start .cmb01{-webkit-animation:combo 2s 1 ease-in-out 9.8s;}
#stage.start .cmb02{-webkit-animation:combo 2s 1 ease-in-out 10.8s;}
#stage.start .cmb03{-webkit-animation:combo 2s 1 ease-in-out 12.8s;}
#stage.start .cmb04{-webkit-animation:combo 2s 1 ease-in-out 13.8s;}
#stage.start .cmb05{-webkit-animation:combo 2s 1 ease-in-out 14.8s;}
#stage.start .cmb06{-webkit-animation:combo 2s 1 ease-in-out 16.8s;}
#stage.start .cmb07{-webkit-animation:combo 2s 1 ease-in-out 17.8s;}
#stage.start .cmb08{-webkit-animation:combo 2s 1 ease-in-out 18.8s;}
#stage.start .cmb09{-webkit-animation:combo 2s 1 ease-in-out 20.8s;}
#stage.start .cmb10{-webkit-animation:combo 2s 1 ease-in-out 21.8s;}
#stage.start .cmb11{-webkit-animation:combo 2s 1 ease-in-out 22.8s;}
#stage.start .cmb12{-webkit-animation:combo 2s 1 ease-in-out 24.8s;}
#stage.start .cmb13{-webkit-animation:combo 2s 1 ease-in-out 25.8s;}
#stage.start .cmb14{-webkit-animation:combo 2s 1 ease-in-out 26.8s;}
#stage.start .cmb15{-webkit-animation:combo 2s 1 ease-in-out 28.8s;}
#stage.start .cmb16{-webkit-animation:combo 2s 1 ease-in-out 29.8s;}
#stage.start .cmb17{-webkit-animation:combo 2s 1 ease-in-out 30.8s;}
#stage.start .cmb18{-webkit-animation:combo 2s 1 ease-in-out 32.8s;}
#stage.start .cmbxx{-webkit-animation:combo 2s 1 ease-in-out 49s;}
.combo.win{
top:170px;
right:-360px;
width:350px;
z-index:12;
}
#stage.start .combo.win{-webkit-animation:win 2s 1 ease-in-out 63s;}
.ctrl02{
position:absolute;
width:180px;
top:280px;
left:-300px;
z-index:12;
opacity:0;
}
.ctrl02>a{
display:block;
width:180px;
padding:5px 0;
background:rgba(0,0,0,0.59);
border:1px solid rgba(255,255,255,0.5);
font-size:16px;
font-weight:bold;
color:#fff;
-webkit-border-radius:4px;
-webkit-box-shadow:rgba(255,255,255,0.42) 0 0 1px;
text-shadow: 0px 1px #000;
text-align:center;
text-decoration:none;
font-family:Helvetica;
}
#stage.start .ctrl02{-webkit-animation:ctrlbtn 60s 1 ease-in-out 65s;}
/*ブラックホール*/
#stage.start .holeWrap{
position:absolute;
width:400px;
height:400px;
top:50%;
left:50%;
margin:-200px 0 0 -200px;
-webkit-border-radius:200px;
background:-webkit-gradient(radial,center center, 0,center center, 200, from(#fff),color-stop(0.16, #2a2a34),color-stop(0.3, #fff),color-stop(0.4, #6a5e6c),color-stop(0.45, #21242b),color-stop(0.55, #444353),color-stop(0.65, #444353),color-stop(0.78, #514956),color-stop(0.8, #514956),color-stop(0.9, #2c2132),color-stop(0.98, #57515f),to(#544e5a));
-webkit-box-shadow: rgba(255,255,255,0.88) 0 0 10px;
-webkit-box-sizing: border-box;
z-index:1;
-webkit-animation: holemain 20s 1 linear 37s;
-webkit-transform:scale(0);
}
#stage.start .hole{
position:absolute;
top:50%;
left:50%;
width:60px;
height:60px;
margin:-30px 0 0 -30px;
-webkit-border-radius:30px;
background:#000;
-webkit-box-sizing: border-box;
border:#2f2f31 2px solid;
-webkit-box-shadow: rgba(255,255,255,0.75) 0 0 5px;
-webkit-animation: hole 20s 5 linear 37s;
opacity:0.8;
}
#stage.start .hole>span{
display:block;
width:4px;
height:4px;
-webkit-border-radius:2px;
position:absolute;
top:50%;
left:50%;
background:#fff;
opacity:0.75;
}
.hole>span::after,
.hole>span::before{
display:block;
position:absolute;
content:"";
width:2px;
height:2px;
-webkit-transform: rotate(20deg) translate(0px, 80px);
background:#fef;
-webkit-border-radius:1px;
z-index:5;
}
.hole>span::before{
-webkit-transform: rotate(190deg) translate(0px, 30px);
}
.hole>span:nth-child(1){
-webkit-transform: rotate(279deg) translate(0, 120px);
-webkit-box-reflect: below 20px;
}
.hole>span:nth-child(2){
background:#f0f;
-webkit-transform: rotate(70deg) translate(0px, 110px);
-webkit-box-reflect: below 15px;
}
.hole>span:nth-child(3){
-webkit-transform: rotate(90deg) translate(0px, 25px);
-webkit-box-reflect: below 90px;
}
.hole>span:nth-child(4){
-webkit-transform:  rotate(179deg) translate(0, 150px);
-webkit-box-reflect: below 27px;
}
.hole>span:nth-child(5){
background:#f0f;
-webkit-transform: rotate(280deg) translate(0px, 70px);
-webkit-box-reflect: below 15px;
}
.hole>span:nth-child(6){
-webkit-transform: rotate(160deg) translate(0px, 25px);
-webkit-box-reflect: below 40px;
}
.hole>span:nth-child(7){
-webkit-transform: rotate(225deg) translate(0, 36px);
-webkit-box-reflect: below 7px;
}
.hole>span:nth-child(8){
background:#f0f;
-webkit-transform: rotate(210deg) translate(0px, 110px);
-webkit-box-reflect: below 15px;
}
.hole>span:nth-child(9){
-webkit-transform: rotate(122deg) translate(0px, 75px);
-webkit-box-reflect: below 90px;
}
.hole>span:nth-child(10){
-webkit-transform:  rotate(311deg) translate(0, 80px);
-webkit-box-reflect: below 60px;
}
.hole>span:nth-child(11){
background:#f0f;
-webkit-transform: rotate(333deg) translate(0px, 70px);
-webkit-box-reflect: below 15px;
}
.hole>span:nth-child(12){
-webkit-transform: rotate(150deg) translate(0px, 25px);
-webkit-box-reflect: below 40px;
}
.hole>span:nth-child(13){
-webkit-transform: rotate(59deg) translate(0, 10px);
-webkit-box-reflect: below 8px;
}
.hole>span:nth-child(14){
background:#f0f;
-webkit-transform: rotate(55deg) translate(0px, 30px);
-webkit-box-reflect: below 10px;
}
.hole>span:nth-child(15){
-webkit-transform: rotate(222deg) translate(0px, 85px);
-webkit-box-reflect: below 33px;
}
.hole>span:nth-child(16){
-webkit-transform: translate(0, 54px);
-webkit-box-reflect: below 33px;
}
.hole>span:nth-child(17){
background:#f0f;
-webkit-transform: rotate(177deg) translate(0px, 20px);
-webkit-box-reflect: below 120px;
}
.hole>span:nth-child(18){
-webkit-transform: rotate(115deg) translate(0px, 70px);
-webkit-box-reflect: below 35px;
}
.hole>span:nth-child(19){
-webkit-transform: rotate(135deg) translate(0, 26px);
-webkit-box-reflect: below 10px;
}
.hole>span:nth-child(20){
background:#f0f;
-webkit-transform: rotate(110deg) translate(0px, 66px);
-webkit-box-reflect: below 13px;
}
.hole>span:nth-child(21){
-webkit-transform: rotate(200deg) translate(0px, 47px);
-webkit-box-reflect: below 90px;
}
.hole>span:nth-child(22){
-webkit-transform: rotate(220deg) translate(0, 8px);
-webkit-box-reflect: below 160px;
}
.hole>span:nth-child(23){
background:#f0f;
-webkit-transform: rotate(111deg) translate(0px, 70px);
-webkit-box-reflect: below 15px;
}
.hole>span:nth-child(24){
-webkit-transform: rotate(120deg) translate(0px, 25px);
-webkit-box-reflect: below 40px;
}
.hole>span:nth-child(25){
-webkit-transform: rotate(10deg) translate(0px, 47px);
-webkit-box-reflect: below 90px;
}
.hole>span:nth-child(26){
-webkit-transform: rotate(20deg) translate(0, 8px);
-webkit-box-reflect: below 160px;
}
.hole>span:nth-child(27){
background:#f0f;
-webkit-transform: rotate(30deg) translate(0px, 70px);
-webkit-box-reflect: below 15px;
}
.hole>span:nth-child(28){
-webkit-transform: rotate(40deg) translate(0px, 45px);
-webkit-box-reflect: below 40px;
}
.hole>span:nth-child(29){
-webkit-transform: rotate(50deg) translate(0px, 47px);
-webkit-box-reflect: below 10px;
}
.hole>span:nth-child(30){
-webkit-transform: rotate(60deg) translate(0, 38px);
-webkit-box-reflect: below 160px;
}
.hole>span:nth-child(31){
background:#f0f;
-webkit-transform: rotate(70deg) translate(0px, 70px);
-webkit-box-reflect: below 15px;
}
.hole>span:nth-child(32){
-webkit-transform: rotate(80deg) translate(0px, 25px);
-webkit-box-reflect: below 40px;
}
.heart{
position:relative;
top:-160px;
left:50%;
width:20px;
height:18px;
margin-left:-10px;
opacity:0;
z-index:5;
}
.heart:before,
.heart:after {
position:absolute;
content:"";
left:10px;
top: 0;
width:10px;
height:16px;
background:#e00;
-webkit-border-radius:10px 10px 0 0;
-webkit-transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
}
.heart:after{
left:0;
-webkit-transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
}
#stage.start .heart{
-webkit-animation: heart 1s 1 ease-out 57s;
}
.endBg{
display:none;
position:absolute;
width:442px;
}
#stage.start .endBg{
display:block;
z-index:10;
left:-450px;
-webkit-animation: bgefect 80s 1 ease-out 58s;
}
.endBg>p{
height:20px;
background:url(http://jsdo-it-static-contents.s3.amazonaws.com/assets/y/g/l/C/yglCW.jpg) left top no-repeat;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 50;
}
#stage.start .endBg>p:nth-child(1){
background-position: left top;
-webkit-animation: end 2s 1 ease-in 58s;
}
#stage.start .endBg>p:nth-child(2){
background-position: 0 -20px;
-webkit-animation: end 2s 1 ease-in 58.2s;
}
#stage.start .endBg>p:nth-child(3){
background-position: 0 -40px;
-webkit-animation: end 2s 1 ease-in 58.4s;
}
#stage.start .endBg>p:nth-child(4){
background-position: 0 -60px;
-webkit-animation: end 2s 1 ease-in 58.6s;
}
#stage.start .endBg>p:nth-child(5){
background-position: 0 -80px;
-webkit-animation: end 2s 1 ease-in 58.8s;
}
#stage.start .endBg>p:nth-child(6){
background-position: 0 -100px;
-webkit-animation: end 2s 1 ease-in 58s;
}
#stage.start .endBg>p:nth-child(7){
background-position: 0 -120px;
-webkit-animation: end 2s 1 ease-in 58.2s;
}
#stage.start .endBg>p:nth-child(8){
background-position: 0 -140px;
-webkit-animation: end 2s 1 ease-in 58.4s;
}
#stage.start .endBg>p:nth-child(9){
background-position: 0 -160px;
-webkit-animation: end 2s 1 ease-in 58.6s;
}
#stage.start .endBg>p:nth-child(10){
background-position: 0 -180px;
-webkit-animation: end 2s 1 ease-in 58.8s;
}
#stage.start .endBg>p:nth-child(11){
background-position: 0 -200px;
-webkit-animation: end 2s 1 ease-in 58s;
}
#stage.start .endBg>p:nth-child(12){
background-position: 0 -220px;
-webkit-animation: end 2s 1 ease-in 58.2s;
}
#stage.start .endBg>p:nth-child(13){
background-position: 0 -240px;
-webkit-animation: end 2s 1 ease-in 58.4s;
}
#stage.start .endBg>p:nth-child(14){
background-position: 0 -260px;
-webkit-animation: end 2s 1 ease-in 58.6s;
}
#stage.start .endBg>p:nth-child(15){
background-position: 0 -280px;
-webkit-animation: end 2s 1 ease-in 58.8s;
}
#stage.start .endBg>p:nth-child(16){
background-position: 0 -300px;
-webkit-animation: end 2s 1 ease-in 58.4s;
}
#stage.start .endBg>p:nth-child(17){
background-position: 0 -320px;
-webkit-animation: end 2s 1 ease-in 58.6s;
}
#stage.start .endBg>p:nth-child(18){
background-position: 0 -340px;
-webkit-animation: end 2s 1 ease-in 58.8s;
}
#stage.start .endBg>p:nth-child(19){
background-position: 0 -360px;
-webkit-animation: end 2s 1 ease-in 59s;
}
#stage.start .endBg>p:nth-child(20){
background-position: 0 -380px;
-webkit-animation: end 2s 1 ease-in 59.2s;
}
/**
 * ---------------------------------------------------
 *  Definition of animation.
 * ---------------------------------------------------
 */
@-webkit-keyframes effect0{
  10%{-webkit-transform: translate(0);}
  11%{-webkit-transform: translate(1px);}
  12%{-webkit-transform: translate(-1px);}
  13%{-webkit-transform:translate(0);}
  14%{-webkit-transform:translate(0);}
  20%{-webkit-transform: translate(0);}
  21%{-webkit-transform: translate(-2px);}
  22%{-webkit-transform: translate(2px);}
  23%{-webkit-transform:translate(0);}
  24%{-webkit-transform:translate(0);}
  35%{-webkit-transform: translate(0);}
  36%{-webkit-transform: translate(3px);}
  37%{-webkit-transform: translate(-3px);}
  38%{-webkit-transform:translate(2px);}
  39%{-webkit-transform:translate(0);}
  69%{-webkit-transform: translate(0);}
  70%{-webkit-transform: translate(5px);}
  71%{-webkit-transform: translate(-5px);}
  72%{-webkit-transform:translate(2px);}
  73%{-webkit-transform:translate(0);}
  88%{-webkit-transform: translate(0);}
  89%{-webkit-transform: translate(12px);}
  90%{-webkit-transform: translate(-12px);}
  91%{-webkit-transform:translate(6px);}
  92%{-webkit-transform:translate(0);}
}
@-webkit-keyframes effect00{
  0%{-webkit-transform: translate(0);}
  5%{-webkit-transform: translate(3px);}
  10%{-webkit-transform: translate(-3px);opacity:0.65;}
  15%{-webkit-transform: translate(3px);opacity:1;}
  20%{-webkit-transform: translate(-3px);}
  25%{-webkit-transform: translate(3px);}
  30%{-webkit-transform: translate(0);}
  35%{-webkit-transform: translate(3px);opacity:0.65;}
  40%{-webkit-transform: translate(-3px);opacity:1;}
  55%{-webkit-transform: translate(3px);}
  60%{-webkit-transform: translate(-3px);}
  65%{-webkit-transform: translate(3px);opacity:0.65;}
  70%{-webkit-transform: translate(0);opacity:1;}
  75%{-webkit-transform: translate(3px);}
  80%{-webkit-transform: translate(-3px);}
  85%{-webkit-transform: translate(3px);}
  90%{-webkit-transform: translate(-3px);opacity:0.65;}
  95%{-webkit-transform: translate(3px);opacity:1;}
  100%{-webkit-transform: translate(0);}
}
@-webkit-keyframes effect01{
  0% {top:400px;}
  5%{-webkit-transform:scale(1);opacity:0.65;}
  10%{opacity:0.85;}
  15%{-webkit-transform:scale(1.1);opacity:0.65;}
  20%{opacity:0.85;}
  25%{-webkit-transform:scale(1.1);opacity:0.65;}
  30%{opacity:0.85;}
  40%{opacity:0.85;}
  50%{top:-30px;opacity:0;-webkit-transform:scale(1.1);opacity:0;}
}
@-webkit-keyframes effect02{
  0% {top:400px; opacity: 0;}
  30%{top:400px; opacity: 0;}
  35%{-webkit-transform:scale(1);opacity:0.65;}
  40%{opacity:0.85;}
  45%{-webkit-transform:scale(1.1);opacity:0.65;}
  50%{opacity:0.85;}
  55%{-webkit-transform:scale(1.1);opacity:0.65;}
  60%{opacity:0.85;}
  65%{opacity:0.85;}
  70%{top:-30px;opacity:0;-webkit-transform:scale(1.1);opacity:0;}
}
@-webkit-keyframes effect03{
  0%{top:400px; opacity:0;}
  60%{top:400px; opacity:0;}
  65%{-webkit-transform:scale(1);opacity:0.65;}
  70%{opacity:0.85;}
  75%{-webkit-transform:scale(1.1);opacity:0.65;}
  80%{opacity:0.85;}
  85%{-webkit-transform:scale(1.1);opacity:0.65;}
  90%{opacity:0.85;}
  95%{opacity:0.85;}
  100% {top:-30px;opacity:0;-webkit-transform:scale(1.1);opacity:0;}
}
@-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;}
}
@-webkit-keyframes effect04{
  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;}
}
@-webkit-keyframes effect05{
  0% {-webkit-transform: translate(0) scale(0);}
  70%{-webkit-transform: translate(2px) scale(0); margin-left:400px;}
  71%{-webkit-transform: translate(2px) scale(4); opacity: 0.95;}
  100%{-webkit-transform: translate(2px) scale(0); opacity: 0.45;}
}
@-webkit-keyframes effect06{
  0% {-webkit-transform: translate(0) scale(0);}
  70% {-webkit-transform: translate(2px) scale(0); margin-left:-300px; margin-top:-200px;}
  71% {-webkit-transform: translate(2px) scale(4); opacity: 0.95;}
  100% {-webkit-transform: translate(2px) scale(0); opacity: 0.45;}
}
@-webkit-keyframes effect07{
  46%{-webkit-transform:translate(0px) scale(1); opacity:1;}
  48%{-webkit-transform:translate(2px) scale(1.1); opacity:0.5;}
  50%{-webkit-transform:scale(1); opacity:1;}
  52%{-webkit-transform:translate(-2px) scale(1.1); opacity:0.5;}
  54%{-webkit-transform:scale(1); opacity:1;}
  56%{-webkit-transform:translate(2px) scale(1.1); opacity:0.5;}
  58%{-webkit-transform:scale(1); opacity:1;}
  72%{-webkit-transform:translate(0px) scale(1); opacity:1;}
  74%{-webkit-transform:translate(2px) scale(1.1); opacity:0.5;}
  76%{-webkit-transform:scale(1); opacity:1;}
  78%{-webkit-transform:translate(-2px) scale(1.1); opacity:0.5;}
  80%{-webkit-transform:scale(1); opacity:1;}
  82%{-webkit-transform:translate(2px) scale(1.1); opacity:0.5;}
  84%{-webkit-transform:scale(1); opacity:1;}  
}
@-webkit-keyframes attckname01{
 0%{}
 2%{right:0;}
 98%{right:0;}
 100%{}
}
@-webkit-keyframes damage{
  0%{margin-top:0;opacity:1;}
  8%{margin-top:-12px;}
  18%{margin-top:0px;}
  23%{margin-top:-8px;}
  28%{margin-top:0}
  48%{opacity:1;}
  49%{opacity:0;}
  100%{opacity:0;}
}
@-webkit-keyframes hole{
  0%{-webkit-transform:rotate(0);opacity:1;}
  100%{-webkit-transform:rotate(3600deg);opacity:1;}
}
@-webkit-keyframes holemain{
  0%{-webkit-transform:scale(0);}
  10%{-webkit-transform:scale(1);opacity:1;}
  50%{-webkit-transform:scale(1);opacity:1;}
  60%{-webkit-transform:scale(0);opacity:0;}
}
@-webkit-keyframes enemy{
  0%{}
  5%{-webkit-transform:scale(0.1) rotate(200deg) skewY(200deg) translate(-35px,-130px);opacity:0;}
  36%{-webkit-transform:scale(0.1);opacity:0;}
  36.5%{-webkit-transform: translate(2px) scale(1.1); opacity: 0.5;}
  37%{-webkit-transform: translate(0px) scale(1); opacity:1;}
  37.5%{-webkit-transform: translate(2px) scale(1.1); opacity: 0.5;}
  38%{-webkit-transform:scale(1); opacity: 1;}
  38.5%{-webkit-transform: translate(-2px) scale(1.1); opacity: 0.5;}
  39%{-webkit-transform:scale(1); opacity: 1;}
  39.5%{-webkit-transform: translate(2px) scale(1.1); opacity: 0.5;}
  40%{-webkit-transform:scale(1); opacity: 1;}
  41%{-webkit-transform: translate(2px) scale(1.1); opacity: 0.5;}
  42%{-webkit-transform:scale(1); opacity: 1;}
  51%{-webkit-transform:scale(1);opacity:1;}
  52%{-webkit-transform: skewX(-35deg);}
  59%{-webkit-transform: skewX(-35deg);}
  60%{-webkit-transform: skewX(35deg);}
  67%{-webkit-transform: skewX(35deg);}
  70%{-webkit-transform: scaleY(0.01) scaleX(3);}
  74%{-webkit-transform: scaleY(0.01) scaleX(0.01);}
  99%{-webkit-transform: scale(0.1);}
  100%{opacity:0;}
}
@-webkit-keyframes pwrGg{
  0%{width:100%;}
  15%{width:100%;}
  17%{width:95%;}
  21%{width:90%;}
  23%{width:84%;}
  26%{width:82%;}
  28%{width:80%;}
  30%{width:78%;}
  32%{width:76%;}
  35%{width:72%;}
  37%{width:70%;}
  40%{width:68%;}
  42%{width:65%;}
  44%{width:62%;}
  46%{width:60%;}
  48%{width:54%;}
  50%{width:50%;}
  72%{width:50%;}
  73%{width:0%;}
  100%{}
}
@-webkit-keyframes combo{
  0%{}
  20%{right:-50px;}
  30%{right:-50px;opacity:1;}
  60%{right:-50px;opacity:1;}
  100%{right:-15px;opacity:0;}
}
@-webkit-keyframes heart{
  0%{opacity:0.2}
  75%{-webkit-transform:scale(2) rotate(10deg);opacity:0.8;}
  76%{-webkit-transform:scale(2.1) rotate(10deg);}
  77%{opacity:0;}
}
@-webkit-keyframes end{
  0%{opacity:0;}
  10%{-webkit-transform: rotateX(0deg);opacity:1;}
  100%{-webkit-transform: rotateX(360deg);}
}
@-webkit-keyframes bgefect{
  0%{left:0;opacity:0.1;}
  1%{left:0;opacity:1;}
  99%{left:0;}
  100%{}
}
@-webkit-keyframes win{
  0%{}
  20%{right:-25px;}
  30%{right:-25px;opacity:1;}
  60%{right:-25px;opacity:1;}
  100%{right:0px;opacity:0;}
}
@-webkit-keyframes ctrlbtn{
  0%{left:50%; margin-left:-90px;}
  5%{opacity:1;}
  100%{left:50%; margin-left:-90px;opacity:1;}
}

皆さん応援ありがとうございました！本作品が銅賞を受賞することが出来ました！これからも色々と作品を作って行きたいと思います！ ( 2012.1.21) 締切り間近になって、どんどん大作が出てきているようなので、ちょっと時間をかけて2つの必殺技と戦闘シーンを製作しました！「CSSで必殺技！第2弾」の最終型必殺技になります。第2弾がメラミでこの第4弾はメラゾーマな感じです。 ※ webkit系ブラウザでアニメーション確認ができます。 FireFox,opera等の対応は記述が増えてしまう為、控えさせていただきました。動作検証済み mac : safari , GoogleChorome win : GoogleChorome 問題有り win:safari5.0.1 正常なアニメーションが描画されません。 CSSで必殺技！第1弾 http://jsdo.it/panicdragon/zh69 CSSで必殺技！第2弾 http://jsdo.it/panicdragon/23cU CSSで必殺技！第3弾 http://jsdo.it/panicdragon/x8ky CSSで必殺技！第4弾 http://jsdo.it/panicdragon/jhql ローディング http://jsdo.it/panicdragon/owjE 以上、よろしくお願いいたします。// forked from edo_m18's "CSSで必殺技！" http://jsdo.it/edo_m18/g5fN $(function(){ $('.attack').click(function (){ $('#stage').addClass('start'); }); $('.reset').click(function (){ $('#stage').removeClass('start'); return false; }); });<div id="stage"> <div class="inner"> <div class="endBg"><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div> <div id="enemy"><img src="http://jsdo-it-static-contents.s3.amazonaws.com/assets/f/j/f/h/fjfhR.png" alt="" /></div> <div class="heart"></div> <div class="effect"> <span class="pic01"></span><span class="pic02"></span><span class="pic03"></span> </div> <div class="effect02"> <span class="pic01"></span><span class="pic02"></span><span class="pic03"></span> </div> <div class="effect03"> <span class="pic01"></span><span class="pic02"></span><span class="pic03"></span> </div> <div class="effect04"> <span class="pic01"></span><span class="pic02"></span><span class="pic03"></span> </div> <div class="damage d01">208</div> <div class="damage d02">247</div> <div class="damage d03">138</div> <div class="damage d04">99999</div> <div class="pwrGg"><span></span></div> <div id="ctrl"> <button class="attack">攻撃！</button> <button class="reset">リセット</button> </div> <div class="ctrl02"><a href="#" class="reset">reset</a></div> <div class="attackName name01"> <p>Thunder Ball</p> </div> <div class="attackName name02"> <p>Black Hole</p> </div> <div class="attackName thankyou"> <p>Thank you</p> </div> <div class="combo cmb01">1<span>combo</span></div> <div class="combo cmb02">2<span>combo</span></div> <div class="combo cmb03">3<span>combo</span></div> <div class="combo cmb04">4<span>combo</span></div> <div class="combo cmb05">5<span>combo</span></div> <div class="combo cmb06">6<span>combo</span></div> <div class="combo cmb07">7<span>combo</span></div> <div class="combo cmb08">8<span>combo</span></div> <div class="combo cmb09">9<span>combo</span></div> <div class="combo cmb10">10<span>combo</span></div> <div class="combo cmb11">11<span>combo</span></div> <div class="combo cmb12">12<span>combo</span></div> <div class="combo cmb13">13<span>combo</span></div> <div class="combo cmb14">14<span>combo</span></div> <div class="combo cmb15">15<span>combo</span></div> <div class="combo cmb16">16<span>combo</span></div> <div class="combo cmb17">17<span>combo</span></div> <div class="combo cmb18">18<span>combo</span></div> <div class="combo cmbxx">xx<span>combo</span></div> <div class="combo win">You Win!!!</div> <div class="holeWrap"> <div class="hole"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> </div> </div> </div>body,div,p{ margin:0; padding:0; font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, Arial, Verdana; } #stage{ position:relative; width:442px; height:402px; text-align:center; overflow:hidden; } .inner{ position:absolute; width:442px; height:402px; padding:20px 0; background:url(http://jsdo-it-static-contents.s3.amazonaws.com/assets/y/g/l/C/yglCW.jpg) left top no-repeat; border:solid 1px #111; } #stage.start{ -webkit-animation: effect0 7s 1 linear; } #stage.start .inner{ background:url(http://jsdo-it-static-contents.s3.amazonaws.com/assets/h/n/o/B/hnoBk.jpg) left top no-repeat; -webkit-animation: effect00 1s 40 linear 7s; } #stage.start .effect04 .pic01, #stage.start .effect04 .pic02, #stage.start .effect04 .pic03{ 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: effect04 4s 6 ease-in-out 6s; opacity:0; z-index:10; } #stage.start .effect04 .pic02{ margin-top:-210px; margin-left:-100px; -webkit-animation: effect05 4s 6 ease-in-out 7s; } #stage.start .effect04 .pic03{ margin-top:-130px; margin-left:-150px; -webkit-animation: effect06 4s 6 ease-in-out 9s; } #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, #stage.start .effect02>.pic01:before, #stage.start .effect02>.pic01:after, #stage.start .effect02>.pic02:before, #stage.start .effect02>.pic02:after, #stage.start .effect02>.pic03:before, #stage.start .effect02>.pic03:after, #stage.start .effect03>.pic01:before, #stage.start .effect03>.pic01:after, #stage.start .effect03>.pic02:before, #stage.start .effect03>.pic02:after, #stage.start .effect03>.pic03:before, #stage.start .effect03>.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, #stage.start .effect02>.pic01:before, #stage.start .effect02>.pic01:after, #stage.start .effect02>.pic01, #stage.start .effect02>.pic02:before, #stage.start .effect02>.pic02:after, #stage.start .effect02>.pic02, #stage.start .effect02>.pic03:before, #stage.start .effect02>.pic03:after, #stage.start .effect02>.pic03, #stage.start .effect03>.pic01:before, #stage.start .effect03>.pic01:after, #stage.start .effect03>.pic01, #stage.start .effect03>.pic02:before, #stage.start .effect03>.pic02:after, #stage.start .effect03>.pic02, #stage.start .effect03>.pic03:before, #stage.start .effect03>.pic03:after, #stage.start .effect03>.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; opacity:0.85; -webkit-animation: effect01 6s 4 ease-in 7s; z-index:10; } #stage.start .effect02>.pic01:before, #stage.start .effect02>.pic01:after, #stage.start .effect02>.pic01, #stage.start .effect02>.pic02:before, #stage.start .effect02>.pic02:after, #stage.start .effect02>.pic02, #stage.start .effect02>.pic03:before, #stage.start .effect02>.pic03:after, #stage.start .effect02>.pic03{ -webkit-animation: effect02 6s 4 ease-in 7s; } #stage.start .effect03>.pic01:before, #stage.start .effect03>.pic01:after, #stage.start .effect03>.pic01, #stage.start .effect03>.pic02:before, #stage.start .effect03>.pic02:after, #stage.start .effect03>.pic02, #stage.start .effect03>.pic03:before, #stage.start .effect03>.pic03:after, #stage.start .effect03>.pic03{ -webkit-animation: effect03 6s 4 ease-in 7s; } #stage.start .effect>.pic01:before, #stage.start .effect>.pic01:after, #stage.start .effect>.pic01{ left:200px; -webkit-border-radius:8px; } #stage.start .effect02>.pic01:before, #stage.start .effect02>.pic01:after, #stage.start .effect02>.pic01{ left:100px; -webkit-border-radius:8px; } #stage.start .effect03>.pic01:before, #stage.start .effect03>.pic01:after, #stage.start .effect03>.pic01{ left:100px; -webkit-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; } #stage.start .effect02>.pic02:before, #stage.start .effect02>.pic02:after, #stage.start .effect02>.pic02{ left:18px; margin-top:-10px; -webkit-border-radius:8px; } #stage.start .effect03>.pic02:before, #stage.start .effect03>.pic02:after, #stage.start .effect03>.pic02{ left:18px; margin-top:-10px; -webkit-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; } #stage.start .effect02>.pic03:before, #stage.start .effect02>.pic03:after, #stage.start .effect02>.pic03{ left:210px; width:10px; height:10px; margin-top:-50px; -webkit-border-radius:5px; } #stage.start .effect03>.pic03:before, #stage.start .effect03>.pic03:after, #stage.start .effect03>.pic03{ left:290px; width:10px; height:10px; margin-top:-40px; -webkit-border-radius:5px; } #stage.start .effect>.pic01:before, #stage.start .effect02>.pic01:before, #stage.start .effect03>.pic01:before{ width:10px; height:10px; margin-top:10px; -webkit-border-radius:5px; left:-80px; } #stage.start .effect>.pic01:after, #stage.start .effect02>.pic01:after, #stage.start .effect03>.pic01:after{ width:6px; height:6px; margin-top:-30px; -webkit-border-radius:3px; left:80px; } #stage.start .effect>.pic02:before, #stage.start .effect02>.pic02:before, #stage.start .effect03>.pic02:before{ width:10px; height:10px; margin-top:-40px; -webkit-border-radius:5px; left:80px; } #stage.start .effect>.pic02:after, #stage.start .effect02>.pic02:after, #stage.start .effect03>.pic02:after{ width:6px; height:6px; margin-top:30px; -webkit-border-radius:3px; left:280px; } #stage.start .effect>.pic03:before, #stage.start .effect02>.pic03:before, #stage.start .effect03>.pic03:before{ width:10px; height:10px; margin-top:-40px; -webkit-border-radius:5px; left:80px; } #stage.start .effect>.pic03:after, #stage.start .effect02>.pic03:after, #stage.start .effect03>.pic03:after{ width:6px; height:6px; margin-top:30px; -webkit-border-radius:3px; left:120px; } #ctrl {margin-top:10px;} #stage.start #enemy img{ position:relative; -webkit-animation: effect07 4s 6 linear 8s; z-index:5; } #stage.start #enemy{ position:relative; -webkit-animation: enemy 20s 1 ease-in-out 42s; z-index:5; } .attackName{display:none;} #stage.start .attackName{ display:block; position:absolute; width:130px; bottom:66px; right:-135px; padding:2px 0 0; font-size:14px; color:#fff; background:#000; opacity:0.63; } .attackName.name01{-webkit-animation: attckname01 26s 1 ease-in 7s;} .attackName.name02{-webkit-animation: attckname01 18s 1 ease-in 33s;} .attackName.thankyou{ -webkit-animation: attckname01 20s 1 ease-in 65s; z-index:15; } .damage{ position:absolute; color:#e00; font-size:36px; font-weight:bold; font-family: Helvetica; opacity:0; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0%,#fff), color-stop(49%,#e05a5a), color-stop(50%,#cd2e2e), color-stop(100%,#ce2121)); -webkit-text-fill-color:transparent; -webkit-background-clip:text; z-index:10; } #stage.start .d01{ top:199px; left:186px; -webkit-animation: damage 4s 6 ease-out 10s; } #stage.start .d02{ top:85px; left:203px; -webkit-animation: damage 4s 6 ease-out 11s; } #stage.start .d03{ top:175px; left:125px; -webkit-animation: damage 4s 6 ease-out 13s; } #stage.start .d04{ font-size:48px; top:202px; left:150px; -webkit-animation: damage 4s 1 ease-out 50s; } .pwrGg{ position:absolute; bottom:100px; left:30px; width:85%; border:#fff 2px solid; height:8px; -webkit-border-radius:6px; } .pwrGg>span{ display: block; width:100%; height:8px; background:#e00; -webkit-border-radius:6px; } #stage.start .pwrGg>span{ width:0%; -webkit-animation:pwrGg 70s 1 linear; } .combo{ position:absolute; right:-180px; top:10px; width:160px; font-size:36px; font-family:sans-serif; font-weight:bold; opacity:1; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0%,#fff), color-stop(49%,#e05a5a), color-stop(50%,#cd2e2e), color-stop(100%,#ce2121)); -webkit-text-fill-color:transparent; -webkit-background-clip:text; -webkit-transform:skewX(-20deg); border-bottom:#eee 1px solid; text-align:left; opacity:0; } .combo>span{ font-family:Helvetica; font-size:24px; letter-spacing:-2px; background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0%,#eee), color-stop(49%,#eee), color-stop(50%,#ccc), color-stop(100%,#ccc)); -webkit-text-fill-color:transparent; -webkit-background-clip:text; } #stage.start .cmb01{-webkit-animation:combo 2s 1 ease-in-out 9.8s;} #stage.start .cmb02{-webkit-animation:combo 2s 1 ease-in-out 10.8s;} #stage.start .cmb03{-webkit-animation:combo 2s 1 ease-in-out 12.8s;} #stage.start .cmb04{-webkit-animation:combo 2s 1 ease-in-out 13.8s;} #stage.start .cmb05{-webkit-animation:combo 2s 1 ease-in-out 14.8s;} #stage.start .cmb06{-webkit-animation:combo 2s 1 ease-in-out 16.8s;} #stage.start .cmb07{-webkit-animation:combo 2s 1 ease-in-out 17.8s;} #stage.start .cmb08{-webkit-animation:combo 2s 1 ease-in-out 18.8s;} #stage.start .cmb09{-webkit-animation:combo 2s 1 ease-in-out 20.8s;} #stage.start .cmb10{-webkit-animation:combo 2s 1 ease-in-out 21.8s;} #stage.start .cmb11{-webkit-animation:combo 2s 1 ease-in-out 22.8s;} #stage.start .cmb12{-webkit-animation:combo 2s 1 ease-in-out 24.8s;} #stage.start .cmb13{-webkit-animation:combo 2s 1 ease-in-out 25.8s;} #stage.start .cmb14{-webkit-animation:combo 2s 1 ease-in-out 26.8s;} #stage.start .cmb15{-webkit-animation:combo 2s 1 ease-in-out 28.8s;} #stage.start .cmb16{-webkit-animation:combo 2s 1 ease-in-out 29.8s;} #stage.start .cmb17{-webkit-animation:combo 2s 1 ease-in-out 30.8s;} #stage.start .cmb18{-webkit-animation:combo 2s 1 ease-in-out 32.8s;} #stage.start .cmbxx{-webkit-animation:combo 2s 1 ease-in-out 49s;} .combo.win{ top:170px; right:-360px; width:350px; z-index:12; } #stage.start .combo.win{-webkit-animation:win 2s 1 ease-in-out 63s;} .ctrl02{ position:absolute; width:180px; top:280px; left:-300px; z-index:12; opacity:0; } .ctrl02>a{ display:block; width:180px; padding:5px 0; background:rgba(0,0,0,0.59); border:1px solid rgba(255,255,255,0.5); font-size:16px; font-weight:bold; color:#fff; -webkit-border-radius:4px; -webkit-box-shadow:rgba(255,255,255,0.42) 0 0 1px; text-shadow: 0px 1px #000; text-align:center; text-decoration:none; font-family:Helvetica; } #stage.start .ctrl02{-webkit-animation:ctrlbtn 60s 1 ease-in-out 65s;} /*ブラックホール*/ #stage.start .holeWrap{ position:absolute; width:400px; height:400px; top:50%; left:50%; margin:-200px 0 0 -200px; -webkit-border-radius:200px; background:-webkit-gradient(radial,center center, 0,center center, 200, from(#fff),color-stop(0.16, #2a2a34),color-stop(0.3, #fff),color-stop(0.4, #6a5e6c),color-stop(0.45, #21242b),color-stop(0.55, #444353),color-stop(0.65, #444353),color-stop(0.78, #514956),color-stop(0.8, #514956),color-stop(0.9, #2c2132),color-stop(0.98, #57515f),to(#544e5a)); -webkit-box-shadow: rgba(255,255,255,0.88) 0 0 10px; -webkit-box-sizing: border-box; z-index:1; -webkit-animation: holemain 20s 1 linear 37s; -webkit-transform:scale(0); } #stage.start .hole{ position:absolute; top:50%; left:50%; width:60px; height:60px; margin:-30px 0 0 -30px; -webkit-border-radius:30px; background:#000; -webkit-box-sizing: border-box; border:#2f2f31 2px solid; -webkit-box-shadow: rgba(255,255,255,0.75) 0 0 5px; -webkit-animation: hole 20s 5 linear 37s; opacity:0.8; } #stage.start .hole>span{ display:block; width:4px; height:4px; -webkit-border-radius:2px; position:absolute; top:50%; left:50%; background:#fff; opacity:0.75; } .hole>span::after, .hole>span::before{ display:block; position:absolute; content:""; width:2px; height:2px; -webkit-transform: rotate(20deg) translate(0px, 80px); background:#fef; -webkit-border-radius:1px; z-index:5; } .hole>span::before{ -webkit-transform: rotate(190deg) translate(0px, 30px); } .hole>span:nth-child(1){ -webkit-transform: rotate(279deg) translate(0, 120px); -webkit-box-reflect: below 20px; } .hole>span:nth-child(2){ background:#f0f; -webkit-transform: rotate(70deg) translate(0px, 110px); -webkit-box-reflect: below 15px; } .hole>span:nth-child(3){ -webkit-transform: rotate(90deg) translate(0px, 25px); -webkit-box-reflect: below 90px; } .hole>span:nth-child(4){ -webkit-transform: rotate(179deg) translate(0, 150px); -webkit-box-reflect: below 27px; } .hole>span:nth-child(5){ background:#f0f; -webkit-transform: rotate(280deg) translate(0px, 70px); -webkit-box-reflect: below 15px; } .hole>span:nth-child(6){ -webkit-transform: rotate(160deg) translate(0px, 25px); -webkit-box-reflect: below 40px; } .hole>span:nth-child(7){ -webkit-transform: rotate(225deg) translate(0, 36px); -webkit-box-reflect: below 7px; } .hole>span:nth-child(8){ background:#f0f; -webkit-transform: rotate(210deg) translate(0px, 110px); -webkit-box-reflect: below 15px; } .hole>span:nth-child(9){ -webkit-transform: rotate(122deg) translate(0px, 75px); -webkit-box-reflect: below 90px; } .hole>span:nth-child(10){ -webkit-transform: rotate(311deg) translate(0, 80px); -webkit-box-reflect: below 60px; } .hole>span:nth-child(11){ background:#f0f; -webkit-transform: rotate(333deg) translate(0px, 70px); -webkit-box-reflect: below 15px; } .hole>span:nth-child(12){ -webkit-transform: rotate(150deg) translate(0px, 25px); -webkit-box-reflect: below 40px; } .hole>span:nth-child(13){ -webkit-transform: rotate(59deg) translate(0, 10px); -webkit-box-reflect: below 8px; } .hole>span:nth-child(14){ background:#f0f; -webkit-transform: rotate(55deg) translate(0px, 30px); -webkit-box-reflect: below 10px; } .hole>span:nth-child(15){ -webkit-transform: rotate(222deg) translate(0px, 85px); -webkit-box-reflect: below 33px; } .hole>span:nth-child(16){ -webkit-transform: translate(0, 54px); -webkit-box-reflect: below 33px; } .hole>span:nth-child(17){ background:#f0f; -webkit-transform: rotate(177deg) translate(0px, 20px); -webkit-box-reflect: below 120px; } .hole>span:nth-child(18){ -webkit-transform: rotate(115deg) translate(0px, 70px); -webkit-box-reflect: below 35px; } .hole>span:nth-child(19){ -webkit-transform: rotate(135deg) translate(0, 26px); -webkit-box-reflect: below 10px; } .hole>span:nth-child(20){ background:#f0f; -webkit-transform: rotate(110deg) translate(0px, 66px); -webkit-box-reflect: below 13px; } .hole>span:nth-child(21){ -webkit-transform: rotate(200deg) translate(0px, 47px); -webkit-box-reflect: below 90px; } .hole>span:nth-child(22){ -webkit-transform: rotate(220deg) translate(0, 8px); -webkit-box-reflect: below 160px; } .hole>span:nth-child(23){ background:#f0f; -webkit-transform: rotate(111deg) translate(0px, 70px); -webkit-box-reflect: below 15px; } .hole>span:nth-child(24){ -webkit-transform: rotate(120deg) translate(0px, 25px); -webkit-box-reflect: below 40px; } .hole>span:nth-child(25){ -webkit-transform: rotate(10deg) translate(0px, 47px); -webkit-box-reflect: below 90px; } .hole>span:nth-child(26){ -webkit-transform: rotate(20deg) translate(0, 8px); -webkit-box-reflect: below 160px; } .hole>span:nth-child(27){ background:#f0f; -webkit-transform: rotate(30deg) translate(0px, 70px); -webkit-box-reflect: below 15px; } .hole>span:nth-child(28){ -webkit-transform: rotate(40deg) translate(0px, 45px); -webkit-box-reflect: below 40px; } .hole>span:nth-child(29){ -webkit-transform: rotate(50deg) translate(0px, 47px); -webkit-box-reflect: below 10px; } .hole>span:nth-child(30){ -webkit-transform: rotate(60deg) translate(0, 38px); -webkit-box-reflect: below 160px; } .hole>span:nth-child(31){ background:#f0f; -webkit-transform: rotate(70deg) translate(0px, 70px); -webkit-box-reflect: below 15px; } .hole>span:nth-child(32){ -webkit-transform: rotate(80deg) translate(0px, 25px); -webkit-box-reflect: below 40px; } .heart{ position:relative; top:-160px; left:50%; width:20px; height:18px; margin-left:-10px; opacity:0; z-index:5; } .heart:before, .heart:after { position:absolute; content:""; left:10px; top: 0; width:10px; height:16px; background:#e00; -webkit-border-radius:10px 10px 0 0; -webkit-transform: rotate(-45deg); -webkit-transform-origin: 0 100%; } .heart:after{ left:0; -webkit-transform: rotate(45deg); -webkit-transform-origin: 100% 100%; } #stage.start .heart{ -webkit-animation: heart 1s 1 ease-out 57s; } .endBg{ display:none; position:absolute; width:442px; } #stage.start .endBg{ display:block; z-index:10; left:-450px; -webkit-animation: bgefect 80s 1 ease-out 58s; } .endBg>p{ height:20px; background:url(http://jsdo-it-static-contents.s3.amazonaws.com/assets/y/g/l/C/yglCW.jpg) left top no-repeat; -webkit-transform-style: preserve-3d; -webkit-perspective: 50; } #stage.start .endBg>p:nth-child(1){ background-position: left top; -webkit-animation: end 2s 1 ease-in 58s; } #stage.start .endBg>p:nth-child(2){ background-position: 0 -20px; -webkit-animation: end 2s 1 ease-in 58.2s; } #stage.start .endBg>p:nth-child(3){ background-position: 0 -40px; -webkit-animation: end 2s 1 ease-in 58.4s; } #stage.start .endBg>p:nth-child(4){ background-position: 0 -60px; -webkit-animation: end 2s 1 ease-in 58.6s; } #stage.start .endBg>p:nth-child(5){ background-position: 0 -80px; -webkit-animation: end 2s 1 ease-in 58.8s; } #stage.start .endBg>p:nth-child(6){ background-position: 0 -100px; -webkit-animation: end 2s 1 ease-in 58s; } #stage.start .endBg>p:nth-child(7){ background-position: 0 -120px; -webkit-animation: end 2s 1 ease-in 58.2s; } #stage.start .endBg>p:nth-child(8){ background-position: 0 -140px; -webkit-animation: end 2s 1 ease-in 58.4s; } #stage.start .endBg>p:nth-child(9){ background-position: 0 -160px; -webkit-animation: end 2s 1 ease-in 58.6s; } #stage.start .endBg>p:nth-child(10){ background-position: 0 -180px; -webkit-animation: end 2s 1 ease-in 58.8s; } #stage.start .endBg>p:nth-child(11){ background-position: 0 -200px; -webkit-animation: end 2s 1 ease-in 58s; } #stage.start .endBg>p:nth-child(12){ background-position: 0 -220px; -webkit-animation: end 2s 1 ease-in 58.2s; } #stage.start .endBg>p:nth-child(13){ background-position: 0 -240px; -webkit-animation: end 2s 1 ease-in 58.4s; } #stage.start .endBg>p:nth-child(14){ background-position: 0 -260px; -webkit-animation: end 2s 1 ease-in 58.6s; } #stage.start .endBg>p:nth-child(15){ background-position: 0 -280px; -webkit-animation: end 2s 1 ease-in 58.8s; } #stage.start .endBg>p:nth-child(16){ background-position: 0 -300px; -webkit-animation: end 2s 1 ease-in 58.4s; } #stage.start .endBg>p:nth-child(17){ background-position: 0 -320px; -webkit-animation: end 2s 1 ease-in 58.6s; } #stage.start .endBg>p:nth-child(18){ background-position: 0 -340px; -webkit-animation: end 2s 1 ease-in 58.8s; } #stage.start .endBg>p:nth-child(19){ background-position: 0 -360px; -webkit-animation: end 2s 1 ease-in 59s; } #stage.start .endBg>p:nth-child(20){ background-position: 0 -380px; -webkit-animation: end 2s 1 ease-in 59.2s; } /** * --------------------------------------------------- * Definition of animation. * --------------------------------------------------- */ @-webkit-keyframes effect0{ 10%{-webkit-transform: translate(0);} 11%{-webkit-transform: translate(1px);} 12%{-webkit-transform: translate(-1px);} 13%{-webkit-transform:translate(0);} 14%{-webkit-transform:translate(0);} 20%{-webkit-transform: translate(0);} 21%{-webkit-transform: translate(-2px);} 22%{-webkit-transform: translate(2px);} 23%{-webkit-transform:translate(0);} 24%{-webkit-transform:translate(0);} 35%{-webkit-transform: translate(0);} 36%{-webkit-transform: translate(3px);} 37%{-webkit-transform: translate(-3px);} 38%{-webkit-transform:translate(2px);} 39%{-webkit-transform:translate(0);} 69%{-webkit-transform: translate(0);} 70%{-webkit-transform: translate(5px);} 71%{-webkit-transform: translate(-5px);} 72%{-webkit-transform:translate(2px);} 73%{-webkit-transform:translate(0);} 88%{-webkit-transform: translate(0);} 89%{-webkit-transform: translate(12px);} 90%{-webkit-transform: translate(-12px);} 91%{-webkit-transform:translate(6px);} 92%{-webkit-transform:translate(0);} } @-webkit-keyframes effect00{ 0%{-webkit-transform: translate(0);} 5%{-webkit-transform: translate(3px);} 10%{-webkit-transform: translate(-3px);opacity:0.65;} 15%{-webkit-transform: translate(3px);opacity:1;} 20%{-webkit-transform: translate(-3px);} 25%{-webkit-transform: translate(3px);} 30%{-webkit-transform: translate(0);} 35%{-webkit-transform: translate(3px);opacity:0.65;} 40%{-webkit-transform: translate(-3px);opacity:1;} 55%{-webkit-transform: translate(3px);} 60%{-webkit-transform: translate(-3px);} 65%{-webkit-transform: translate(3px);opacity:0.65;} 70%{-webkit-transform: translate(0);opacity:1;} 75%{-webkit-transform: translate(3px);} 80%{-webkit-transform: translate(-3px);} 85%{-webkit-transform: translate(3px);} 90%{-webkit-transform: translate(-3px);opacity:0.65;} 95%{-webkit-transform: translate(3px);opacity:1;} 100%{-webkit-transform: translate(0);} } @-webkit-keyframes effect01{ 0% {top:400px;} 5%{-webkit-transform:scale(1);opacity:0.65;} 10%{opacity:0.85;} 15%{-webkit-transform:scale(1.1);opacity:0.65;} 20%{opacity:0.85;} 25%{-webkit-transform:scale(1.1);opacity:0.65;} 30%{opacity:0.85;} 40%{opacity:0.85;} 50%{top:-30px;opacity:0;-webkit-transform:scale(1.1);opacity:0;} } @-webkit-keyframes effect02{ 0% {top:400px; opacity: 0;} 30%{top:400px; opacity: 0;} 35%{-webkit-transform:scale(1);opacity:0.65;} 40%{opacity:0.85;} 45%{-webkit-transform:scale(1.1);opacity:0.65;} 50%{opacity:0.85;} 55%{-webkit-transform:scale(1.1);opacity:0.65;} 60%{opacity:0.85;} 65%{opacity:0.85;} 70%{top:-30px;opacity:0;-webkit-transform:scale(1.1);opacity:0;} } @-webkit-keyframes effect03{ 0%{top:400px; opacity:0;} 60%{top:400px; opacity:0;} 65%{-webkit-transform:scale(1);opacity:0.65;} 70%{opacity:0.85;} 75%{-webkit-transform:scale(1.1);opacity:0.65;} 80%{opacity:0.85;} 85%{-webkit-transform:scale(1.1);opacity:0.65;} 90%{opacity:0.85;} 95%{opacity:0.85;} 100% {top:-30px;opacity:0;-webkit-transform:scale(1.1);opacity:0;} } @-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;} } @-webkit-keyframes effect04{ 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;} } @-webkit-keyframes effect05{ 0% {-webkit-transform: translate(0) scale(0);} 70%{-webkit-transform: translate(2px) scale(0); margin-left:400px;} 71%{-webkit-transform: translate(2px) scale(4); opacity: 0.95;} 100%{-webkit-transform: translate(2px) scale(0); opacity: 0.45;} } @-webkit-keyframes effect06{ 0% {-webkit-transform: translate(0) scale(0);} 70% {-webkit-transform: translate(2px) scale(0); margin-left:-300px; margin-top:-200px;} 71% {-webkit-transform: translate(2px) scale(4); opacity: 0.95;} 100% {-webkit-transform: translate(2px) scale(0); opacity: 0.45;} } @-webkit-keyframes effect07{ 46%{-webkit-transform:translate(0px) scale(1); opacity:1;} 48%{-webkit-transform:translate(2px) scale(1.1); opacity:0.5;} 50%{-webkit-transform:scale(1); opacity:1;} 52%{-webkit-transform:translate(-2px) scale(1.1); opacity:0.5;} 54%{-webkit-transform:scale(1); opacity:1;} 56%{-webkit-transform:translate(2px) scale(1.1); opacity:0.5;} 58%{-webkit-transform:scale(1); opacity:1;} 72%{-webkit-transform:translate(0px) scale(1); opacity:1;} 74%{-webkit-transform:translate(2px) scale(1.1); opacity:0.5;} 76%{-webkit-transform:scale(1); opacity:1;} 78%{-webkit-transform:translate(-2px) scale(1.1); opacity:0.5;} 80%{-webkit-transform:scale(1); opacity:1;} 82%{-webkit-transform:translate(2px) scale(1.1); opacity:0.5;} 84%{-webkit-transform:scale(1); opacity:1;} } @-webkit-keyframes attckname01{ 0%{} 2%{right:0;} 98%{right:0;} 100%{} } @-webkit-keyframes damage{ 0%{margin-top:0;opacity:1;} 8%{margin-top:-12px;} 18%{margin-top:0px;} 23%{margin-top:-8px;} 28%{margin-top:0} 48%{opacity:1;} 49%{opacity:0;} 100%{opacity:0;} } @-webkit-keyframes hole{ 0%{-webkit-transform:rotate(0);opacity:1;} 100%{-webkit-transform:rotate(3600deg);opacity:1;} } @-webkit-keyframes holemain{ 0%{-webkit-transform:scale(0);} 10%{-webkit-transform:scale(1);opacity:1;} 50%{-webkit-transform:scale(1);opacity:1;} 60%{-webkit-transform:scale(0);opacity:0;} } @-webkit-keyframes enemy{ 0%{} 5%{-webkit-transform:scale(0.1) rotate(200deg) skewY(200deg) translate(-35px,-130px);opacity:0;} 36%{-webkit-transform:scale(0.1);opacity:0;} 36.5%{-webkit-transform: translate(2px) scale(1.1); opacity: 0.5;} 37%{-webkit-transform: translate(0px) scale(1); opacity:1;} 37.5%{-webkit-transform: translate(2px) scale(1.1); opacity: 0.5;} 38%{-webkit-transform:scale(1); opacity: 1;} 38.5%{-webkit-transform: translate(-2px) scale(1.1); opacity: 0.5;} 39%{-webkit-transform:scale(1); opacity: 1;} 39.5%{-webkit-transform: translate(2px) scale(1.1); opacity: 0.5;} 40%{-webkit-transform:scale(1); opacity: 1;} 41%{-webkit-transform: translate(2px) scale(1.1); opacity: 0.5;} 42%{-webkit-transform:scale(1); opacity: 1;} 51%{-webkit-transform:scale(1);opacity:1;} 52%{-webkit-transform: skewX(-35deg);} 59%{-webkit-transform: skewX(-35deg);} 60%{-webkit-transform: skewX(35deg);} 67%{-webkit-transform: skewX(35deg);} 70%{-webkit-transform: scaleY(0.01) scaleX(3);} 74%{-webkit-transform: scaleY(0.01) scaleX(0.01);} 99%{-webkit-transform: scale(0.1);} 100%{opacity:0;} } @-webkit-keyframes pwrGg{ 0%{width:100%;} 15%{width:100%;} 17%{width:95%;} 21%{width:90%;} 23%{width:84%;} 26%{width:82%;} 28%{width:80%;} 30%{width:78%;} 32%{width:76%;} 35%{width:72%;} 37%{width:70%;} 40%{width:68%;} 42%{width:65%;} 44%{width:62%;} 46%{width:60%;} 48%{width:54%;} 50%{width:50%;} 72%{width:50%;} 73%{width:0%;} 100%{} } @-webkit-keyframes combo{ 0%{} 20%{right:-50px;} 30%{right:-50px;opacity:1;} 60%{right:-50px;opacity:1;} 100%{right:-15px;opacity:0;} } @-webkit-keyframes heart{ 0%{opacity:0.2} 75%{-webkit-transform:scale(2) rotate(10deg);opacity:0.8;} 76%{-webkit-transform:scale(2.1) rotate(10deg);} 77%{opacity:0;} } @-webkit-keyframes end{ 0%{opacity:0;} 10%{-webkit-transform: rotateX(0deg);opacity:1;} 100%{-webkit-transform: rotateX(360deg);} } @-webkit-keyframes bgefect{ 0%{left:0;opacity:0.1;} 1%{left:0;opacity:1;} 99%{left:0;} 100%{} } @-webkit-keyframes win{ 0%{} 20%{right:-25px;} 30%{right:-25px;opacity:1;} 60%{right:-25px;opacity:1;} 100%{right:0px;opacity:0;} } @-webkit-keyframes ctrlbtn{ 0%{left:50%; margin-left:-90px;} 5%{opacity:1;} 100%{left:50%; margin-left:-90px;opacity:1;} }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/jhql/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/panicdragon/jhql" title="forked: CSSで必殺技！第4弾! 最終型">forked: CSSで必殺技！第4弾! 最終型 - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code