DIR : /home/kozerus/public_html/jkwii/js/jsdoit/fragment/style.css

/home/kozerus/public_html/jkwii/js/jsdoit/fragment

*{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
ol, ul{
	list-style:none;
}

html{
	height:100%;
}

body {
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	font-size: 12px;
    line-height: 1.5em;
    letter-spacing: 0;
	color:#333;
	
	background:#000;
	overflow:hidden;
	height:100%;
	
	-webkit-perspective: 200px;
	-moz-perspective   : 500px;
	perspective    : 500px;
}

#wrap{
	width:465px;
	height:465px;
	
	position: absolute;
	top:50%;
	left:50%;
	margin-top:-232px;
	margin-left:-232px;
	
}

#loading{
	position: absolute;
	width:465px;
	height:465px;
    color:#ccc;
    line-height:465px;
    text-align:center;
}

/*--------------------------------------------------------------------------------
 *
 *	#tv
 *
 *--------------------------------------------------------------------------------*/

#tv{
	background:url("http://taq7.com/jsdoit/q2/images/tv.png");
	width:465px;
	height:465px;
	position: absolute;
}

/*--------------------------------------------------------------------------------
 *
 *	#btn
 *
 *--------------------------------------------------------------------------------*/

#btn{
	position: absolute;
	width:38px;
	height:17px;
}

#btn a{
	display:block;
	width:38px;
	height:17px;
	overflow:hidden;
	text-indent:-9999px;
	background:url(http://jsrun.it/assets/n/b/B/E/nbBEA.png);
}


/*--------------------------------------------------------------------------------
 *
 *	#pager
 *
 *--------------------------------------------------------------------------------*/

#pager{
	position: absolute;
	width:16px;
	height:16px;
	top:425px;
	left:232px;
}

#pager li{
	position: absolute;
	width:16px;
	height:16px;
}

#pager li a{
	display: block;
	width:16px;
	height:16px;
	text-indent:-9999px;
	background:url(http://jsrun.it/assets/1/8/I/Y/18IYa.png);
}

/*--------------------------------------------------------------------------------
 *
 *	#scanline
 *
 *--------------------------------------------------------------------------------*/

#scanline{
	width:465px;
	height:465px;
	position: absolute;
	overflow:hidden;
}

#scanline li{
	background:url("http://jsrun.it/assets/k/r/I/4/krI4V.png");
	position:absolute;
	width:465px;
}

#scanline li:nth-child(1){
	height:150px;
     opacity:0.5;
	
	-webkit-animation: scanline 8s linear infinite;
	-moz-animation: scanline 8s linear infinite;
	animation: scanline 8s linear infinite;
}

#scanline li:nth-child(2){
	height:100px;
	opacity:0.6;
	
	-webkit-animation: scanline 5s linear infinite;
	-moz-animation: scanline 5s linear infinite;
	animation: scanline 5s linear infinite;
}

#scanline li:nth-child(3){
	height:150px;
    opacity:0.5;
	
	-webkit-animation: scanline 1.5s linear infinite;
	-moz-animation: scanline 1.5s linear infinite;
	animation: scanline 1.5s linear infinite;
}

@-webkit-keyframes scanline {
	from{top: 615px;}
	to	{top: -150px;}
}

/*--------------------------------------------------------------------------------
 *
 *	#world_photos
 *
 *--------------------------------------------------------------------------------*/

#world_photos{
	-webkit-transform-style: preserve-3d;
	-moz-transform-style   : preserve-3d;
	transform-style: preserve-3d;
}



#photos li{
	position:absolute;
	width:465px;
	height:465px;
	background:#f2f2f2;
	
	
}

#photos li img{
	display: block;
	position:absolute;
	-webkit-box-reflect: below 100px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(0.6, rgba(0,0,0,0)), to(rgba(0,0,0,0.1)));
}

#photos li div{
	position:absolute;
	width:465px;
	height:465px;
	text-align: center;
	-webkit-box-reflect: below 100px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(0.6, rgba(0,0,0,0)), to(rgba(0,0,0,0.3)));
}
#photos li div.top_text{
	background:url(http://taq7.com/jsdoit/q2/images/bg_top.jpg);
}

#photos li div.top_text p{
	width: 365px;
	margin:205px auto 0;
	text-align: left;
}

#photos li div.twitter_text{
	background:url(http://taq7.com/jsdoit/q2/images/bg_text.jpg);
}
#photos li div.twitter_text:before{
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
#photos li div.twitter_text p{
	display: inline-block;
	vertical-align: middle;
	width: 260px;
	text-align: left;
	
	background-repeat:no-repeat;
	padding-left:65px;
}
#photos li div.twitter_text p span{
	display:block;
	font-weight:bold;
	margin-bottom:5px;
}

/*--------------------------------------------------------------------------------
 *
 *	#world_split
 *
 *--------------------------------------------------------------------------------*/

#world_split{
	-webkit-transform-style: preserve-3d;
	-moz-transform-style   : preserve-3d;
	transform-style: preserve-3d;
}

#split{
	
}
#split li{
	width:31px;
	height:31px;
	overflow:hidden;
	float:left;
	position:relative;
	background:#f2f2f2;
	
}
#split li img{
	display:block;
	position:absolute;
}

#split li div{
	position:absolute;
	width:465px;
	height:465px;
	text-align: center;
}

#split li div.top_text{
	background:url(http://taq7.com/jsdoit/q2/images/bg_top.jpg);
}
#split li div.top_text p{
	width: 365px;
	margin:205px auto 0;
	text-align: left;
}

#split li div.twitter_text{
	background:url(http://taq7.com/jsdoit/q2/images/bg_text.jpg);
}
#split li div.twitter_text:before{
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
#split li div.twitter_text p{
	display: inline-block;
	vertical-align: middle;
	width: 260px;
	text-align: left;
	
	background-repeat:no-repeat;
	padding-left:65px;
}
#split li div.twitter_text p span{
	display:block;
	font-weight:bold;
	margin-bottom:5px;
}

/*--------------------------------------------------------------------------------
 *
 *	#world_man
 *
 *--------------------------------------------------------------------------------*/

#world_man{
	position:absolute;
}

#world_man img{
	display:block;
	position:absolute;
	-webkit-box-reflect: below -7px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(0.6, rgba(0,0,0,0)), to(rgba(0,0,0,0.5)));
}

#world_man img:nth-child(1){
	-webkit-animation: walk-r 16s linear infinite;
	-webkit-transform: scaleX(0.8) scaleY(0.8) ;
	//opacity:0.7;
	top:330px;
	
}
#world_man img:nth-child(2){
	-webkit-animation: walk-l 13s linear infinite;
	-webkit-transform: scaleX(-0.9) scaleY(0.9) ;
	//opacity:0.8;
	top:350px;
	
}
#world_man img:nth-child(3){
	-webkit-animation: walk-r 12s linear infinite;
	top:380px;
}

@-webkit-keyframes walk-r {
	from{left: -120px;}
	to	{left: 550px;}
}

@-webkit-keyframes walk-l {
	from{left: 520px;}
	to	{left: -70px;}
}

/*--------------------------------------------------------------------------------
 *
 *	#butterfly
 *
 *--------------------------------------------------------------------------------*/

#butterfly{
	position: absolute;
	-webkit-transform:translateZ(-20px);
	//-webkit-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
	//-webkit-transform-origin: 50% 50%;
	left:162px;
	top:0px;
	width: 162px;
	height: 92px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: butterfly-rotate 8s linear infinite;
	opacity:0;
}

@-webkit-keyframes butterfly-rotate {
	from {
		-webkit-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.8, 0.8, 0.8) translate3d(-560px, 0px, 0px);
	}
	25% {
		-webkit-transform: rotate3d(0, 1, 0, -90deg) scale3d(0.8, 0.8, 0.8) translate3d(-560px, 0px, 0px);
	}
	50% {
		-webkit-transform: rotate3d(0, 1, 0, -180deg) scale3d(0.8, 0.8, 0.8) translate3d(-560px, 0px, 0px);
	}
	75% {
		-webkit-transform: rotate3d(0, 1, 0, -270deg) scale3d(0.8, 0.8, 0.8) translate3d(-560px, 0px, 0px);
	}
	to{
		-webkit-transform: rotate3d(0, 1, 0, -360deg) scale3d(0.8, 0.8, 0.8) translate3d(-560px, 0px, 0px);
	}
}

#rightwing{
	-webkit-transform: rotateX(90deg) translate3d(-81px, 0px, 0px) rotate3d(0, 1, 0, 180deg) ;
	-webkit-transform-origin: top right;
	position: absolute;
	left:81px;
	top:0px;
	width: 81px;
	height: 92px;
	background-image: url("http://jsrun.it/assets/b/T/a/O/bTaOu.png");
	background-repeat:no-repeat;
	-webkit-animation: rightwing-swing 0.2s linear infinite;
}

@-webkit-keyframes rightwing-swing {
	from {
		-webkit-transform:rotateX(90deg) translate3d(-81px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
	}
	50% {
		-webkit-transform:rotateX(90deg) translate3d(-81px, 0px, 0px) rotate3d(0, 1, 0, 100deg);
	}
	to{
		-webkit-transform:rotateX(90deg) translate3d(-81px, 0px, 0px) rotate3d(0, 1, 0, 180deg);
	}
}

#leftwing{
	-webkit-transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg) ;
	position: absolute;
	-webkit-transform-origin: top right;
	left:0px;
	top:0px;
	width: 81px;
	height: 92px;
	background-image: url("http://jsrun.it/assets/b/T/a/O/bTaOu.png");
	background-repeat: no-repeat;
	-webkit-animation: leftwing-swing 0.2s linear infinite;
}

@-webkit-keyframes leftwing-swing {
	from {
		-webkit-transform:rotateX(90deg) rotate3d(0, 1, 0, 0deg);
	}
	50% {
		-webkit-transform:rotateX(90deg) rotate3d(0, 1, 0, 80deg);
	}
	to{
		-webkit-transform:rotateX(90deg) rotate3d(0, 1, 0, 00deg);
	}
}
//


koh5_pano



Your browser does not support the HTML5 canvas element.
Drag mouse to navigate.

Navigation





17.Aug.2010, Martin Wengenmayer