Forked from: jsdo.it_team's 【終了しました】SPEC vol.4 投稿用コード View Diff (556)

くまー！くまっ！くままっ！

tsururin

2012-07-09 05:05:48

License: MIT License

Fork: 0

Fav: 0

View: 14193

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 24 lines
HTML 77 lines
CSS 486 lines

くまー。
くまっ！？
webkit系でくまんくままん。

くまー！くまっ！くままっ！
jQuery v1.7.2

<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<title>COLOPL inc.</title>

</head>
<body>

くまー！くまっ！くままっ！
html5doctor.com Reset Stylesheet

/* kumasan */
.kumasan{
	width: 100px;
	height: 200px;
	-webkit-transform: scale(.5);
}
.kumasan .okaos{
	position: relative;
	width: 100px;
	height: 100px;
	z-index: 12;
}
.kumasan .okaos .omimi{
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #cca791;
	box-shadow: -5px -5px 20px #956752 inset;
}
.kumasan .okaos .migi.omimi{
	top: 0;
	left: 0;
}
.kumasan .okaos .hidari.omimi{
	top: 0;
	right: 0;
}
.kumasan .okaos .okao{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 85px;
	height: 85px;
	border-radius: 50%;
	background: #d0a883;
	box-shadow: 0 0 20px #ae744a inset;
}
.kumasan .okaos .okao .omeme{
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	clip: rect(7px, auto, auto, auto);
	background: black;
}
.kumasan .okaos .okao .omeme .mentama{
	display: none;
	position: absolute;
	bottom: 1px;
	left: 1px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: white;
}
.kumasan .okaos .okao .migi.omeme{
	top: 20px;
	left: 28px;
	-webkit-transform: rotate(20deg);
}
.kumasan .okaos .okao .hidari.omeme{
	top: 20px;
	right: 14px;
	-webkit-transform: rotate(-20deg);
}
.kumasan .okaos .okao .okuchi_mawari{
	position: absolute;
	bottom: 12px;
	right: 12px;
	width: 50px;
	height: 40px;
	border-radius: 50%;
	background: #ffe3ac;
	box-shadow: -5px -5px 20px #ffcc75 inset;
}
.kumasan .okaos .okao .okuchi_mawari .ohana{
	position: absolute;
	right: 10px;
	top: 5px;
	width: 14px;
	height: 12px;
	border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
	background: black;
}
.kumasan .okaos .okao .okuchi_mawari .okuchis{
	position: absolute;
	right: 8px;
	top: 12px;
	width: 26px;
	height: 12px;
}
.kumasan .okaos .okao .okuchi_mawari .okuchis .okuchi{
	position: absolute;
	border-bottom: solid 2px;
	border-radius: 50%;
}
.kumasan .okaos .okao .okuchi_mawari .okuchis .migi.okuchi{
	left: 0;
	width: 16px;
	height: 12px;
}
.kumasan .okaos .okao .okuchi_mawari .okuchis .hidari.okuchi{
	right: 0;
	width: 10px;
	height: 10px;
	-webkit-transform: rotate(20deg);
}
.kumasan .nuno{
	position: absolute;
	top: 70px;
	left: 10px;
	width: 80px;
	height: 40px;
	border-radius: 0% 100% 10% 90% / 0% 60% 40% 100%;
	background: #ff004b;
	box-shadow: -2px -2px 10px #ae744a inset;
	-webkit-transform-origin: center top;
	z-index: 10;
	overflow: hidden;
}
.kumasan .karada{
	position: absolute;
	right: 0;
	top: 90px;
	width: 75px;
	height: 65px;
	border-radius: 40% 60% 50% 50% / 50% 60% 40% 50%;
	background: #d0a883;
	box-shadow: -5px -5px 20px #ae744a inset;
	z-index: 7;
}
.kumasan .otete{
	position: absolute;
	top: 90px;
	width: 20px;
	height: 65px;
	border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
	background: #d0a883;
	box-shadow: -2px -2px 10px #ae744a inset;
	-webkit-transform-origin: center top;
}
.kumasan .migi.otete{
	z-index: 13;
	left: 30px;
	-webkit-transform: rotate(10deg);
}
.kumasan .hidari.otete{
	z-index: 5;
	right: 12px;
	-webkit-transform: rotate(-30deg) scale(.8);
}
.kumasan .anyo{
	position: absolute;
	top: 140px;
	width: 30px;
	height: 50px;
	border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
	background: #d0a883;
	box-shadow: -2px -2px 10px #ae744a inset;
	-webkit-transform-origin: center top;
}
.kumasan .migi.anyo{
	z-index: 8;
	left: 40px;
	-webkit-transform: rotate(10deg);
}
.kumasan .hidari.anyo{
	z-index: 6;
	right: 8px;
	-webkit-transform: rotate(-30deg) scale(.8);
}

.kumasan.home{
	position: absolute;
	bottom: 100px;
	left: 0;
	-webkit-transform: scale(.5);
}
.kumasan.home .nuno{
	background: red;
}
.kumasan.away{
	position: absolute;
	bottom: 100px;
	right: 0;
	-webkit-transform: scale(.5) matrix(-1, 0, 0, 1, 0, 0);
}
.kumasan.away .nuno{
	background: blue;
}
#kumasans{
	width: 100%;
	height: 100%;
	background: white no-repeat center center;
	background-image: url(http://jsrun.it/assets/n/q/Q/D/nqQDR.png), url(http://jsrun.it/assets/v/t/q/z/vtqzV.png);
	background-size: 0%, 0%;
}
.animeStart #kumasans {
	-webkit-animation:
		kumasans0 .5s linear 0,
		kumasans1 .5s ease-out .5s 2 alternate,
		kumasans3 1s linear 1.5s,
		kumasans2 1s ease-out 2.5s;
	background-size: 0%, 130%;
}
@-webkit-keyframes kumasans0{
	0%{
		background-size: 0%, 0%;
	}
	100%{
		background-size: 0%, 0%;
	}
}
@-webkit-keyframes kumasans3{
	0%{
		background-size: 0%, 0%;
	}
	100%{
		background-size: 0%, 0%;
	}
}
@-webkit-keyframes kumasans1{
	0%{
		background-size: 0%, 300%;
	}
	100%{
		background-size: 80%, 150%;
	}
}
@-webkit-keyframes kumasans2{
	0%{
		background-size: 0%, 300%;
	}
	50%{
		background-size: 0%, 100%;
	}
	100%{
		background-size: 0%, 130%;
	}
}

#game{
	position: absolute;
	top: -60px;
	text-align: center;
	width: 100%;
	-webkit-transform: rotate(0deg);
	-webkit-transform-origin: right bottom;
}
#game img{
	height: 60px;
}
.animeStart #game{
	-webkit-animation: game1 2.5s linear, game2 .5s ease-in 2.5s, game3 .7s ease-in 3s;
	
	top: 350px;
}
@-webkit-keyframes game1{
	0%{
		top: -60px;
	}
	100%{
		top: -60px;
	}
}
@-webkit-keyframes game2{
	0%{
		top: -60px;
		-webkit-transform: rotate(20deg);
	}
	100%{
		top: 350px;
		-webkit-transform: rotate(10deg);
	}
}
@-webkit-keyframes game3{
	0%{
		-webkit-transform: rotate(10deg);
	}
	20%{
		-webkit-transform: rotate(0deg);
	}
	40%{
		-webkit-transform: rotate(6deg);
	}
	60%{
		-webkit-transform: rotate(0deg);
	}
	80%{
		-webkit-transform: rotate(3deg);
	}
	100%{
		-webkit-transform: rotate(0deg);
	}
}

.logo{
	position: absolute;
	top: 80px;
	text-align: center;
	width: 142px;
	height: 157px;
	line-height: 120px;
	-webkit-transform: scale(0);
}
.logo img{
	width: 80%;
	vertical-align: middle;
}
#home_logo{
	left: 20px;
	background: url(http://jsrun.it/assets/r/d/i/f/rdifk.png);
}
#away_logo{
	right: 20px;
	background: url(http://jsrun.it/assets/h/V/0/3/hV03Z.png);
}

.animeStart #home_logo{
	-webkit-animation: home_logo .5s ease-out;
	-webkit-transform-origin: left bottom;
	-webkit-transform: scale(1) rotate(-10deg);
}
@-webkit-keyframes home_logo{
	0%{
		-webkit-transform: scale(0) rotate(0deg);
	}
	50%{
		-webkit-transform: scale(1.2) rotate(-12deg);
	}
	100%{
		-webkit-transform: scale(1) rotate(-10deg);
	}
}
.animeStart #away_logo{
	-webkit-animation: away_logo .3s ease-out, away_logo2 .5s ease-out.3s;
	-webkit-transform-origin: right bottom;
	-webkit-transform: scale(1) rotate(10deg);
}
@-webkit-keyframes away_logo{
	0%{
		-webkit-transform: scale(0) rotate(0deg);
	}
	100%{
		-webkit-transform: scale(0) rotate(0deg);
	}
}
@-webkit-keyframes away_logo2{
	0%{
		-webkit-transform: scale(0) rotate(0deg);
	}
	50%{
		-webkit-transform: scale(1.2) rotate(12deg);
	}
	100%{
		-webkit-transform: scale(1) rotate(10deg);
	}
}

.animeStart .kumasan{
	-webkit-animation: kumasan 1s ease-in 0,
		kumasan2 .2s ease-in 1s 10 alternate,
		kumasan3 .5s ease-in 3s;
	margin: -20px 70px;
}
@-webkit-keyframes kumasan{
	0%{
		margin: 0 0;
	}
	100%{
		margin: 0 90px;
	}
}
@-webkit-keyframes kumasan2{
	0%{
		margin: 0 90px;
	}
	100%{
		margin: 0 80px;
	}
}
@-webkit-keyframes kumasan3{
	0%{
		margin: 0 90px;
	}
	70%{
		margin: 10px 75px;
	}
	100%{
		margin: -20px 70px;
	}
}
.kumasan .okaos .okao .omeme{
	-webkit-transition: -webkit-transform 0 0;
}
.animeStart .kumasan .okaos .okao .omeme{
	-webkit-transform: rotate(0deg);
	-webkit-transition: -webkit-transform 0 3s;
}

.kumasan .okaos .okao .omeme .mentama{
	display: none;
	position: absolute;
	bottom: 1px;
	left: 1px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: white;
}

.animeStart .kumasan .migi.otete{
	-webkit-animation: migiotete 1s ease-in-out 0 4 alternate;
}
@-webkit-keyframes migiotete{
	0%{
		-webkit-transform: rotate(20deg);
	}
	100%{
		-webkit-transform: rotate(-210deg);
	}
}
.animeStart .kumasan .hidari.otete{
	-webkit-animation: hidariotete 1s ease-in-out 0 4 alternate;
}
@-webkit-keyframes hidariotete{
	0%{
		-webkit-transform: rotate(-30deg) scale(.8);
	}
	100%{
		-webkit-transform: rotate(-180deg) scale(.8);
	}
}
.animeStart .kumasan .migi.anyo{
	-webkit-animation: migianyo .5s ease-in-out -.5s 7 alternate;
	-webkit-transform: rotate(80deg);
}
@-webkit-keyframes migianyo{
	0%{
		-webkit-transform: rotate(20deg);
	}
	100%{
		-webkit-transform: rotate(-20deg);
	}
}
.animeStart .kumasan .hidari.anyo{
	-webkit-animation: hidarianyo .5s ease-in-out -.5s 7 alternate;
	-webkit-transform: rotate(-90deg);
}
@-webkit-keyframes hidarianyo{
	0%{
		-webkit-transform: rotate(-30deg) scale(.8);
	}
	100%{
		-webkit-transform: rotate(10deg) scale(.8);
	}
}

li{
	list-style: none;
}
body {
    position: relative;
    width: 100%;
    background-color: #a6a6a6;
    -webkit-text-size-adjust: none;
}
#bossEffect{
    position: relative;
    margin: 0 auto;
    width: 320px;
    height:480px;
    background-color: white;
    overflow:hidden;
}
#btnStart, #btnReset{
    position: fixed;
    top: 0;
    left: 0;
}
#btnReset{
    position: fixed;
    top: 25px;
    left: 0;
}

くまー。くまっ！？ webkit系でくまんくままん。// forked from Event's "SPEC vol.4 投稿用コード" http://jsdo.it/Event/7E8o (function(){ var BossEffect = { loaded:function(){ var bossEffect$ = document.getElementById('bossEffect'), btnStart$ = document.getElementById('btnStart'), btnReset$ = document.getElementById('btnReset'); btnStart$.addEventListener('click', function (ev) { bossEffect$.setAttribute('class', 'animeStart'); }, false); btnReset$.addEventListener('click', function () { bossEffect$.setAttribute('class', ''); }, false); } }; document.addEventListener("DOMContentLoaded",function(){ BossEffect.loaded(); },false); })(); <html lang="ja-JP"> <head> <meta charset="UTF-8"> <title>COLOPL inc.</title> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"/> <meta name="apple-mobile-web-app-capable" content="yes"> </head> <body> <div id="bossEffect"> <div id="kumasans"> <ul class="kumasan home"> <li class="okaos"> <span class="migi omimi"></span> <span class="hidari omimi"></span> <div class="okao"> <div class="migi omeme"><span class="mentama"></span></div> <div class="hidari omeme"><span class="mentama"></span></div> <div class="okuchi_mawari"> <span class="ohana"></span> <div class="okuchis"> <span class="migi okuchi"></span> <span class="hidari okuchi"></span> </div> </div> </div> </li> <li class="karada"></li> <li class="nuno"></li> <li class="migi otete"></li> <li class="hidari otete"></li> <li class="migi anyo"></li> <li class="hidari anyo"></li> </ul> <ul class="kumasan away"> <li class="okaos"> <span class="migi omimi"></span> <span class="hidari omimi"></span> <div class="okao"> <div class="migi omeme"><span class="mentama"></span></div> <div class="hidari omeme"><span class="mentama"></span></div> <div class="okuchi_mawari"> <span class="ohana"></span> <div class="okuchis"> <span class="migi okuchi"></span> <span class="hidari okuchi"></span> </div> </div> </div> </li> <li class="karada"></li> <li class="nuno"></li> <li class="migi otete"></li> <li class="hidari otete"></li> <li class="migi anyo"></li> <li class="hidari anyo"></li> </ul> <div id="home_logo" class="logo">  <img src="http://jsrun.it/assets/4/M/y/U/4MyUI.png" />  </div> <div id="away_logo" class="logo">  <img src="http://jsrun.it/assets/2/N/g/H/2NgHd.png" />  </div> <div id="game"> <img src="http://jsrun.it/assets/l/o/f/6/lof6H.png" /> <img src="http://jsrun.it/assets/3/v/8/T/3v8Tj.png" /> </div> </div> </div> <input id="btnStart" type="button" value="スタート"> <input id="btnReset" type="button" value="リセット"> </body> </html>/* kumasan */ .kumasan{ width: 100px; height: 200px; -webkit-transform: scale(.5); } .kumasan .okaos{ position: relative; width: 100px; height: 100px; z-index: 12; } .kumasan .okaos .omimi{ position: absolute; width: 40px; height: 40px; border-radius: 50%; background: #cca791; box-shadow: -5px -5px 20px #956752 inset; } .kumasan .okaos .migi.omimi{ top: 0; left: 0; } .kumasan .okaos .hidari.omimi{ top: 0; right: 0; } .kumasan .okaos .okao{ position: absolute; right: 0; bottom: 0; width: 85px; height: 85px; border-radius: 50%; background: #d0a883; box-shadow: 0 0 20px #ae744a inset; } .kumasan .okaos .okao .omeme{ position: absolute; width: 14px; height: 14px; border-radius: 50%; clip: rect(7px, auto, auto, auto); background: black; } .kumasan .okaos .okao .omeme .mentama{ display: none; position: absolute; bottom: 1px; left: 1px; width: 5px; height: 5px; border-radius: 50%; background: white; } .kumasan .okaos .okao .migi.omeme{ top: 20px; left: 28px; -webkit-transform: rotate(20deg); } .kumasan .okaos .okao .hidari.omeme{ top: 20px; right: 14px; -webkit-transform: rotate(-20deg); } .kumasan .okaos .okao .okuchi_mawari{ position: absolute; bottom: 12px; right: 12px; width: 50px; height: 40px; border-radius: 50%; background: #ffe3ac; box-shadow: -5px -5px 20px #ffcc75 inset; } .kumasan .okaos .okao .okuchi_mawari .ohana{ position: absolute; right: 10px; top: 5px; width: 14px; height: 12px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: black; } .kumasan .okaos .okao .okuchi_mawari .okuchis{ position: absolute; right: 8px; top: 12px; width: 26px; height: 12px; } .kumasan .okaos .okao .okuchi_mawari .okuchis .okuchi{ position: absolute; border-bottom: solid 2px; border-radius: 50%; } .kumasan .okaos .okao .okuchi_mawari .okuchis .migi.okuchi{ left: 0; width: 16px; height: 12px; } .kumasan .okaos .okao .okuchi_mawari .okuchis .hidari.okuchi{ right: 0; width: 10px; height: 10px; -webkit-transform: rotate(20deg); } .kumasan .nuno{ position: absolute; top: 70px; left: 10px; width: 80px; height: 40px; border-radius: 0% 100% 10% 90% / 0% 60% 40% 100%; background: #ff004b; box-shadow: -2px -2px 10px #ae744a inset; -webkit-transform-origin: center top; z-index: 10; overflow: hidden; } .kumasan .karada{ position: absolute; right: 0; top: 90px; width: 75px; height: 65px; border-radius: 40% 60% 50% 50% / 50% 60% 40% 50%; background: #d0a883; box-shadow: -5px -5px 20px #ae744a inset; z-index: 7; } .kumasan .otete{ position: absolute; top: 90px; width: 20px; height: 65px; border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%; background: #d0a883; box-shadow: -2px -2px 10px #ae744a inset; -webkit-transform-origin: center top; } .kumasan .migi.otete{ z-index: 13; left: 30px; -webkit-transform: rotate(10deg); } .kumasan .hidari.otete{ z-index: 5; right: 12px; -webkit-transform: rotate(-30deg) scale(.8); } .kumasan .anyo{ position: absolute; top: 140px; width: 30px; height: 50px; border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%; background: #d0a883; box-shadow: -2px -2px 10px #ae744a inset; -webkit-transform-origin: center top; } .kumasan .migi.anyo{ z-index: 8; left: 40px; -webkit-transform: rotate(10deg); } .kumasan .hidari.anyo{ z-index: 6; right: 8px; -webkit-transform: rotate(-30deg) scale(.8); } .kumasan.home{ position: absolute; bottom: 100px; left: 0; -webkit-transform: scale(.5); } .kumasan.home .nuno{ background: red; } .kumasan.away{ position: absolute; bottom: 100px; right: 0; -webkit-transform: scale(.5) matrix(-1, 0, 0, 1, 0, 0); } .kumasan.away .nuno{ background: blue; } #kumasans{ width: 100%; height: 100%; background: white no-repeat center center; background-image: url(http://jsrun.it/assets/n/q/Q/D/nqQDR.png), url(http://jsrun.it/assets/v/t/q/z/vtqzV.png); background-size: 0%, 0%; } .animeStart #kumasans { -webkit-animation: kumasans0 .5s linear 0, kumasans1 .5s ease-out .5s 2 alternate, kumasans3 1s linear 1.5s, kumasans2 1s ease-out 2.5s; background-size: 0%, 130%; } @-webkit-keyframes kumasans0{ 0%{ background-size: 0%, 0%; } 100%{ background-size: 0%, 0%; } } @-webkit-keyframes kumasans3{ 0%{ background-size: 0%, 0%; } 100%{ background-size: 0%, 0%; } } @-webkit-keyframes kumasans1{ 0%{ background-size: 0%, 300%; } 100%{ background-size: 80%, 150%; } } @-webkit-keyframes kumasans2{ 0%{ background-size: 0%, 300%; } 50%{ background-size: 0%, 100%; } 100%{ background-size: 0%, 130%; } } #game{ position: absolute; top: -60px; text-align: center; width: 100%; -webkit-transform: rotate(0deg); -webkit-transform-origin: right bottom; } #game img{ height: 60px; } .animeStart #game{ -webkit-animation: game1 2.5s linear, game2 .5s ease-in 2.5s, game3 .7s ease-in 3s; top: 350px; } @-webkit-keyframes game1{ 0%{ top: -60px; } 100%{ top: -60px; } } @-webkit-keyframes game2{ 0%{ top: -60px; -webkit-transform: rotate(20deg); } 100%{ top: 350px; -webkit-transform: rotate(10deg); } } @-webkit-keyframes game3{ 0%{ -webkit-transform: rotate(10deg); } 20%{ -webkit-transform: rotate(0deg); } 40%{ -webkit-transform: rotate(6deg); } 60%{ -webkit-transform: rotate(0deg); } 80%{ -webkit-transform: rotate(3deg); } 100%{ -webkit-transform: rotate(0deg); } } .logo{ position: absolute; top: 80px; text-align: center; width: 142px; height: 157px; line-height: 120px; -webkit-transform: scale(0); } .logo img{ width: 80%; vertical-align: middle; } #home_logo{ left: 20px; background: url(http://jsrun.it/assets/r/d/i/f/rdifk.png); } #away_logo{ right: 20px; background: url(http://jsrun.it/assets/h/V/0/3/hV03Z.png); } .animeStart #home_logo{ -webkit-animation: home_logo .5s ease-out; -webkit-transform-origin: left bottom; -webkit-transform: scale(1) rotate(-10deg); } @-webkit-keyframes home_logo{ 0%{ -webkit-transform: scale(0) rotate(0deg); } 50%{ -webkit-transform: scale(1.2) rotate(-12deg); } 100%{ -webkit-transform: scale(1) rotate(-10deg); } } .animeStart #away_logo{ -webkit-animation: away_logo .3s ease-out, away_logo2 .5s ease-out.3s; -webkit-transform-origin: right bottom; -webkit-transform: scale(1) rotate(10deg); } @-webkit-keyframes away_logo{ 0%{ -webkit-transform: scale(0) rotate(0deg); } 100%{ -webkit-transform: scale(0) rotate(0deg); } } @-webkit-keyframes away_logo2{ 0%{ -webkit-transform: scale(0) rotate(0deg); } 50%{ -webkit-transform: scale(1.2) rotate(12deg); } 100%{ -webkit-transform: scale(1) rotate(10deg); } } .animeStart .kumasan{ -webkit-animation: kumasan 1s ease-in 0, kumasan2 .2s ease-in 1s 10 alternate, kumasan3 .5s ease-in 3s; margin: -20px 70px; } @-webkit-keyframes kumasan{ 0%{ margin: 0 0; } 100%{ margin: 0 90px; } } @-webkit-keyframes kumasan2{ 0%{ margin: 0 90px; } 100%{ margin: 0 80px; } } @-webkit-keyframes kumasan3{ 0%{ margin: 0 90px; } 70%{ margin: 10px 75px; } 100%{ margin: -20px 70px; } } .kumasan .okaos .okao .omeme{ -webkit-transition: -webkit-transform 0 0; } .animeStart .kumasan .okaos .okao .omeme{ -webkit-transform: rotate(0deg); -webkit-transition: -webkit-transform 0 3s; } .kumasan .okaos .okao .omeme .mentama{ display: none; position: absolute; bottom: 1px; left: 1px; width: 5px; height: 5px; border-radius: 50%; background: white; } .animeStart .kumasan .migi.otete{ -webkit-animation: migiotete 1s ease-in-out 0 4 alternate; } @-webkit-keyframes migiotete{ 0%{ -webkit-transform: rotate(20deg); } 100%{ -webkit-transform: rotate(-210deg); } } .animeStart .kumasan .hidari.otete{ -webkit-animation: hidariotete 1s ease-in-out 0 4 alternate; } @-webkit-keyframes hidariotete{ 0%{ -webkit-transform: rotate(-30deg) scale(.8); } 100%{ -webkit-transform: rotate(-180deg) scale(.8); } } .animeStart .kumasan .migi.anyo{ -webkit-animation: migianyo .5s ease-in-out -.5s 7 alternate; -webkit-transform: rotate(80deg); } @-webkit-keyframes migianyo{ 0%{ -webkit-transform: rotate(20deg); } 100%{ -webkit-transform: rotate(-20deg); } } .animeStart .kumasan .hidari.anyo{ -webkit-animation: hidarianyo .5s ease-in-out -.5s 7 alternate; -webkit-transform: rotate(-90deg); } @-webkit-keyframes hidarianyo{ 0%{ -webkit-transform: rotate(-30deg) scale(.8); } 100%{ -webkit-transform: rotate(10deg) scale(.8); } } li{ list-style: none; } body { position: relative; width: 100%; background-color: #a6a6a6; -webkit-text-size-adjust: none; } #bossEffect{ position: relative; margin: 0 auto; width: 320px; height:480px; background-color: white; overflow:hidden; } #btnStart, #btnReset{ position: fixed; top: 0; left: 0; } #btnReset{ position: fixed; top: 25px; left: 0; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

tsururin

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/2pwu/js"></script>

QR Code

Discussion

Questions on this code?

くまー！くまっ！くままっ！

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags