YamanoteLineMonitor _shimabox Follow 2011-07-01 06:55:42 License: MIT License Fork3 Fav0 View2618 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 0 lines HTML 11 lines CSS 190 lines 山手線とかの電車内モニターで見かけるやつ ※Webkit Only YamanoteLineMonitor <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> 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; } } 山手線とかの電車内モニターで見かけるやつ ※Webkit Only <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? 山手線とかの電車内モニターで見かけるやつ ※Webkit Only Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author _shimabox URLhttp://shimabox.net Twitter: http://twitter.com/shimabox 頑張って勉強します。 よろしくお願いします。 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/e5ks/js"></script> Discussion Questions on this code? Forked sort by latest page views favorite forked forked: YamanoteLineMonitor satoosan 00 294 2/11/190 forked: YamanoteLineMonitor p.esrd.demo 00 286 2/11/190 forked: YamanoteLineMonitor satoosan 00 158 2/11/190