Forked from: Youpinadi's Spirals diff(211)

forked from: Spirals

tetsuwo

2010-08-09 17:54:14

License: MIT License

Fork: 1

Fav: 5

View: 1879

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 2 lines
HTML 12 lines
CSS 134 lines

@from http://jsdo.it/Youpinadi/spirals
@forker Tetsuwo OISHI
@twitter http://twitter.com/_tetsuwo
@facebook http://fb.me/tetsuwo
@blog http://j.mp/tetsuwo

forked from: Spirals

forked from: Spirals

body
{
	margin: auto;
	text-align: center;
	padding:10px;
	overflow:hidden;
}
#container
{
	position: relative;
}
.circle 
{
	position: absolute;
	-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;
	border:2px dashed #8c0;
}
.black
{
	background-color: #8c0;
	border:2px dashed #fff;
}

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

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

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

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

@from http://jsdo.it/Youpinadi/spirals @forker Tetsuwo OISHI @twitter http://twitter.com/_tetsuwo @facebook http://fb.me/tetsuwo @blog http://j.mp/tetsuwo// forked from Youpinadi's "Spirals" http://jsdo.it/Youpinadi/spirals <div id="container"> <div class="circle black rotate" id="circle1"></div> <div class="circle white rotate" id="circle2"></div> <div class="circle black rotate" id="circle3"></div> <div class="circle white rotate" id="circle4"></div> <div class="circle black rotate" id="circle5"></div> <div class="circle white rotate" id="circle6"></div> <div class="circle black rotate" id="circle7"></div> <div class="circle white rotate" id="circle8"></div> <div class="circle black rotate" id="circle9"></div> </div> body { margin: auto; text-align: center; padding:10px; overflow:hidden; } #container { position: relative; } .circle { position: absolute; -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; border:2px dashed #8c0; } .black { background-color: #8c0; border:2px dashed #fff; } #circle1 { width: 100px; height: 100px; border-radius: 50px; -moz-border-radius: 50px; z-index: 10; } #circle2 { width: 120px; height: 120px; border-radius: 60px; -moz-border-radius: 60px; -webkit-animation-delay: 0.3s; z-index: 9; } #circle3 { width: 140px; height: 140px; border-radius: 70px; -moz-border-radius: 70px; -webkit-animation-delay: 0.6s; z-index: 8; background-color: #7b0; } #circle4 { width: 160px; height: 160px; border-radius: 80px; -moz-border-radius: 80px; -webkit-animation-delay: 0.9s; z-index: 7; background-color: #ddd; } #circle5 { width: 180px; height: 180px; border-radius: 90px; -moz-border-radius: 90px; -webkit-animation-delay: 1.2s; background-color: #6a0; z-index: 6; } #circle6 { width: 200px; height: 200px; border-radius: 100px; -moz-border-radius: 100px; -webkit-animation-delay: 1.5s; z-index: 5; background-color: #ccc; } #circle7 { width: 220px; height: 220px; border-radius: 110px; -moz-border-radius: 110px; -webkit-animation-delay: 1.8s; z-index: 4; background-color: #590; } #circle8 { width: 240px; height: 240px; border-radius: 120px; -moz-border-radius: 120px; -webkit-animation-delay: 2.1s; z-index: 3; background-color: #aaa; } #circle9 { width: 260px; height: 260px; -webkit-animation-delay: 2.3s; border-radius: 130px; -moz-border-radius: 130px; z-index: 2; background-color: #480; } .rotate { -webkit-animation-name: rotate; -webkit-transform-origin: 51% 51%; -webkit-animation-duration: 1s; -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

http://jsdo.it/tetsuwo/8B7i forked from: Spirals
Tweet

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/8B7i/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/tetsuwo/8B7i" title="forked from: Spirals">forked from: Spirals - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code

Favorite by

clockmaker

9re

asou_jp

canvastag

mash:

nice

Forked

sort

Tower

Youpinadi

5
11
2690views

3/32/162
- HTML5
- animation
- css3
- spiral
- tower
- グラデ