Forked from: tetsuwo's forked from: Spirals diff(154)

Tower

Youpinadi

2010-09-11 07:37:30

License: MIT License

Fork: 5

Fav: 11

View: 2691

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 3 lines
HTML 32 lines
CSS 162 lines

Tower

</div>
                          </div>
                        </div>
                      
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>

Tower

body
{
  margin: auto;
  text-align: center;
  padding:10px;
  overflow:hidden;
}
#container
{
  margin-left: 100px;
  margin-top: 100px;
}

.circle 
{
  -moz-box-shadow: 0px 3px 3px rgba(55,55,55, 0.2);
  -webkit-box-shadow: 0px 3px 3px rgba(55,55,55, 0.2);
}
.white
{
  background-color: #fff;
}
.black
{
  background-color: #8c0;
}

#circle03
{
  width: 26px;
  height: 26px;
  border-radius: 13px;
  -moz-border-radius: 13px;
}

#circle02
{
  width: 40px;
  height: 40px;
  border-radius: 20px;
  -moz-border-radius: 20px;
}

#circle01
{
  width: 60px;
  height: 60px;
  border-radius: 30px;
  -moz-border-radius: 30px;
}

#circle0
{
  width: 80px;
  height: 80px;
  border-radius: 40px;
  -moz-border-radius: 40px;
}

#circle1
{
  width: 100px;
  height: 100px;
  border-radius: 50px;
  -moz-border-radius: 50px;
}
#circle2
{
  width: 120px;
  height: 120px;
  border-radius: 60px;
  -moz-border-radius: 60px;
  -webkit-animation-delay: 0.3s;
}
#circle3
{
  width: 140px;
  height: 140px;
  border-radius: 70px;
  -moz-border-radius: 70px;
  -webkit-animation-delay: 0.6s;
  background-color: #7b0;
}
#circle4
{
  width: 160px;
  height: 160px;
  border-radius: 80px;
  -moz-border-radius: 80px;
  -webkit-animation-delay: 0.9s;
  background-color: #ddd;
}
#circle5
{
  width: 180px;
  height: 180px;
  border-radius: 90px;
  -moz-border-radius: 90px;
  -webkit-animation-delay: 1.2s;
  background-color: #6a0;
}
#circle6
{
  width: 200px;
  height: 200px;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-animation-delay: 1.5s;
  background-color: #ccc;
}
#circle7
{
  width: 220px;
  height: 220px;
  border-radius: 110px;
  -moz-border-radius: 110px;
  -webkit-animation-delay: 1.8s;
  background-color: #590;
}
#circle8
{
  width: 240px;
  height: 240px;
  border-radius: 120px;
  -moz-border-radius: 120px;
  -webkit-animation-delay: 2.1s;
  background-color: #aaa;
}
#circle9
{
  width: 260px;
  height: 260px;
  -webkit-animation-delay: 2.3s;
  border-radius: 130px;
  -moz-border-radius: 130px;
  background-color: #480;
}

.rotate
{
  -webkit-animation-name: rotate;
  -webkit-transform-origin: 51% 51%;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

@-webkit-keyframes rotate {
  0%{
    -webkit-transform: rotate(0deg);
  }

100%{
    -webkit-transform: rotate(360deg);
  }
}

// forked from _tetsuwo's "forked from: Spirals" http://jsdo.it/_tetsuwo/8B7i // forked from Youpinadi's "Spirals" http://jsdo.it/Youpinadi/spirals <div id="container"> <div class="circle black rotate" id="circle9"> <div class="circle white" id="circle8"> <div class="circle black" id="circle7"> <div class="circle white" id="circle6"> <div class="circle black" id="circle5"> <div class="circle white" id="circle4"> <div class="circle black" id="circle3"> <div class="circle white" id="circle2"> <div class="circle black" id="circle1"> <div class="circle white" id="circle0"> <div class="circle black" id="circle01"> <div class="circle white" id="circle02"> <div class="circle black" id="circle03"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> body { margin: auto; text-align: center; padding:10px; overflow:hidden; } #container { margin-left: 100px; margin-top: 100px; } .circle { -moz-box-shadow: 0px 3px 3px rgba(55,55,55, 0.2); -webkit-box-shadow: 0px 3px 3px rgba(55,55,55, 0.2); } .white { background-color: #fff; } .black { background-color: #8c0; } #circle03 { width: 26px; height: 26px; border-radius: 13px; -moz-border-radius: 13px; } #circle02 { width: 40px; height: 40px; border-radius: 20px; -moz-border-radius: 20px; } #circle01 { width: 60px; height: 60px; border-radius: 30px; -moz-border-radius: 30px; } #circle0 { width: 80px; height: 80px; border-radius: 40px; -moz-border-radius: 40px; } #circle1 { width: 100px; height: 100px; border-radius: 50px; -moz-border-radius: 50px; } #circle2 { width: 120px; height: 120px; border-radius: 60px; -moz-border-radius: 60px; -webkit-animation-delay: 0.3s; } #circle3 { width: 140px; height: 140px; border-radius: 70px; -moz-border-radius: 70px; -webkit-animation-delay: 0.6s; background-color: #7b0; } #circle4 { width: 160px; height: 160px; border-radius: 80px; -moz-border-radius: 80px; -webkit-animation-delay: 0.9s; background-color: #ddd; } #circle5 { width: 180px; height: 180px; border-radius: 90px; -moz-border-radius: 90px; -webkit-animation-delay: 1.2s; background-color: #6a0; } #circle6 { width: 200px; height: 200px; border-radius: 100px; -moz-border-radius: 100px; -webkit-animation-delay: 1.5s; background-color: #ccc; } #circle7 { width: 220px; height: 220px; border-radius: 110px; -moz-border-radius: 110px; -webkit-animation-delay: 1.8s; background-color: #590; } #circle8 { width: 240px; height: 240px; border-radius: 120px; -moz-border-radius: 120px; -webkit-animation-delay: 2.1s; background-color: #aaa; } #circle9 { width: 260px; height: 260px; -webkit-animation-delay: 2.3s; border-radius: 130px; -moz-border-radius: 130px; background-color: #480; } .rotate { -webkit-animation-name: rotate; -webkit-transform-origin: 51% 51%; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } @-webkit-keyframes rotate { 0%{ -webkit-transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); } }

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/c86n/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/Youpinadi/tower" title="Tower">Tower - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code