2011-07-01 06:55:42

License: MIT License

Fork: 3

Fav: 0

View: 2260

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 0 lines
HTML 11 lines
CSS 190 lines

山手線とかの電車内モニターで見かけるやつ
※Webkit Only

YamanoteLineMonitor

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; } }

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

_shimabox

URL
http://shimabox.net

Twitter: http://twitter.com/shimabox

頑張って勉強します。よろしくお願いします。

Size

Width: px
Height: px

code

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

QR Code

Discussion

Questions on this code?

Forked

sort by

latest
page views
favorite
forked

forked: YamanoteLineMonitor

p.esrd.demo

2/11/190

forked: YamanoteLineMonitor

satoosan

2/11/190

forked: YamanoteLineMonitor

satoosan

2/11/190

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code