Forked from: _shimabox's YamanoteLineMonitor View Diff (1) forked: YamanoteLineMonitor p.esrd.demo Follow 2015-02-20 02:41:47 License: MIT License Fork0 Fav0 View287 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 2 lines HTML 11 lines CSS 190 lines forked: YamanoteLineMonitor // forked from _shimabox's "YamanoteLineMonitor" http://jsdo.it/_shimabox/e5ks <div id="contents"> <p id="top">こちら側のドアが開きます</p> <div id="back"> <div id="topLine" class="lines"></div> <div id="bottomLine" class="lines"></div> <div id="exit"></div> <div id="leftDore" class="dores"></div> <div id="rightDore" class="dores"></div> </div> <p id="bottom">Doors on this side will open.</p> </div> forked: YamanoteLineMonitor body { margin:0; padding:0; font-family: Helvetica, Arial, "Meiryo", "メイリオ", sans-serif; } #contents { margin:0 auto; width:465px; height:399px; padding-top:66px; background-color:#f5f5f5; } p#top{ height:44px; margin:0; color:#ff0000; text-align:center; font-size:32px; font-weight:bold; } p#bottom{ margin:0; color:#ff0000; text-align:center; font-size:28px; font-weight:bold; } #back { background-color:#a9a9a9; width:456px; height:245px; margin:0 auto; border-radius:15px; } .lines { width:420px; height:10px; background-color:#ffffff; border-radius:3px; margin:0 auto; position:relative; } #topLine { top:15px; } #bottomLine { top:212px; } #exit { background-color:#ffffff; width:100px; height:210px; margin:0 auto; -webkit-animation: 'exitWidthChange' 4s ease 1s infinite normal; } .dores { background-color:#dcdcdc; width:100px; height:216px; border:solid 5px #000000; position:relative; border-radius:10px; } .dores::after { position:absolute; top:10px; left:10px; content:""; background-color:#f5f5f5; width:70%; height:54%; border:solid 5px #000000; border-radius:10px; } #leftDore { position:relative; top:-220px; left:26%; -webkit-animation: 'moveLeftDore' 4s ease 1s infinite normal; } #rightDore { position:relative; top:-446px; left:50%; -webkit-animation: 'moveRightDore' 4s ease 1s infinite normal; } @-webkit-keyframes 'exitWidthChange' { 0% { width:30%; } 25% { width:40%; } 50% { width:50%; } 75% { width:60%; } 76% { width:30%; } 100% { width:30%; } } @-webkit-keyframes 'moveLeftDore' { 0% { left:26%; } 10% { left:19.3%; } 25% { left:19.3%; } 35% { left:12.6%; } 50% { left:12.6%; } 60% { left:6%; } 75% { left:6%; opacity:1; } 75.1% { left:26%; opacity:0; } 75.2% { opacity:1; } 100% { opacity:1; } } @-webkit-keyframes 'moveRightDore' { 0% { left:50%; } 10% { left:56.7%; } 25% { left:56.7%; } 35% { left:63.4%; } 50% { left:63.4%; } 60% { left:70%; } 75% { left:70%; opacity:1; } 75.1% { left:50%; opacity:0; } 75.2% { opacity:1; } 100% { opacity:1; } } // forked from _shimabox's "YamanoteLineMonitor" http://jsdo.it/_shimabox/e5ks <div id="contents"> <p id="top">こちら側のドアが開きます</p> <div id="back"> <div id="topLine" class="lines"></div> <div id="bottomLine" class="lines"></div> <div id="exit"></div> <div id="leftDore" class="dores"></div> <div id="rightDore" class="dores"></div> </div> <p id="bottom">Doors on this side will open.</p> </div> body { margin:0; padding:0; font-family: Helvetica, Arial, "Meiryo", "メイリオ", sans-serif; } #contents { margin:0 auto; width:465px; height:399px; padding-top:66px; background-color:#f5f5f5; } p#top{ height:44px; margin:0; color:#ff0000; text-align:center; font-size:32px; font-weight:bold; } p#bottom{ margin:0; color:#ff0000; text-align:center; font-size:28px; font-weight:bold; } #back { background-color:#a9a9a9; width:456px; height:245px; margin:0 auto; border-radius:15px; } .lines { width:420px; height:10px; background-color:#ffffff; border-radius:3px; margin:0 auto; position:relative; } #topLine { top:15px; } #bottomLine { top:212px; } #exit { background-color:#ffffff; width:100px; height:210px; margin:0 auto; -webkit-animation: 'exitWidthChange' 4s ease 1s infinite normal; } .dores { background-color:#dcdcdc; width:100px; height:216px; border:solid 5px #000000; position:relative; border-radius:10px; } .dores::after { position:absolute; top:10px; left:10px; content:""; background-color:#f5f5f5; width:70%; height:54%; border:solid 5px #000000; border-radius:10px; } #leftDore { position:relative; top:-220px; left:26%; -webkit-animation: 'moveLeftDore' 4s ease 1s infinite normal; } #rightDore { position:relative; top:-446px; left:50%; -webkit-animation: 'moveRightDore' 4s ease 1s infinite normal; } @-webkit-keyframes 'exitWidthChange' { 0% { width:30%; } 25% { width:40%; } 50% { width:50%; } 75% { width:60%; } 76% { width:30%; } 100% { width:30%; } } @-webkit-keyframes 'moveLeftDore' { 0% { left:26%; } 10% { left:19.3%; } 25% { left:19.3%; } 35% { left:12.6%; } 50% { left:12.6%; } 60% { left:6%; } 75% { left:6%; opacity:1; } 75.1% { left:26%; opacity:0; } 75.2% { opacity:1; } 100% { opacity:1; } } @-webkit-keyframes 'moveRightDore' { 0% { left:50%; } 10% { left:56.7%; } 25% { left:56.7%; } 35% { left:63.4%; } 50% { left:63.4%; } 60% { left:70%; } 75% { left:70%; opacity:1; } 75.1% { left:50%; opacity:0; } 75.2% { opacity:1; } 100% { opacity:1; } } use an iframe compat browser, deer 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 Author p.esrd.demo 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/iHiF/js"></script> Discussion Questions on this code?