Forked from: tetsuwo's forked from: Spirals diff(154) Tower Youpinadi Follow 2010-09-11 07:37:30 License: MIT License Fork5 Fav11 View2519 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 3 lines HTML 32 lines CSS 162 lines Tower // 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> 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); } } use an iframe compat browser, deer 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 tags spiral tower Tweet twitter Tags HTML5 animation css3 spiral tower グラデ Favorite by faviell vincicat Futurefabric.. hakim paq clockmaker shichuan: css3 yamaguchi.m: グラデぐらできれい calmbooks: CSS3HTML5 turusuke: animation tetsuwo: animationcss3spiralGood :-) Forked sort new page view favorite forked forked from: Tower s-k 00 212views 4/32/162 forked from: Tower hiro-hiro 00 277views 4/32/162 forked from: Tower welling 00 229views 4/32/162 forked from: Tower chadakaisei 00 388views 4/32/162 1 2NEXT>>