Forked from: jsdo.it_team's 【終了しました】SPEC vol.4 投稿用コード View Diff (556) くまー!くまっ!くままっ! tsururin Follow 2012-07-09 05:05:48 License: MIT License Fork0 Fav0 View14193 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 24 lines HTML 77 lines CSS 486 lines くまー。 くまっ!? webkit系でくまんくままん。 くまー!くまっ!くままっ! jQuery v1.7.2 // 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> くまー!くまっ!くままっ! 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; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? くまー。 くまっ!? webkit系でくまんくままん。 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author tsururin Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/2pwu/js"></script> animation art&design css css3 Discussion Questions on this code? Tags animation art&design css css3