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: 2519

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); } }

Tweet
QR code
Embed

Design view
Code view
<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>
zip