差分

ナビゲーションに移動 検索に移動
作りかけ
<html lang ="ja">
<head>
<style type ="text/css">
/*この中にCSSを記述*/
/*横幅~559px*/
@media screen and (max-width: 559px) {
p#startup-message {
font-size: 0vw;
}
p#startup-message:before {
font-size: 1vw;
content: '[システムメッセージ] 個人用携帯端末からのアクセスは許可されていません。\A発覚した場合、処罰の対象となります。\AJPSRT Network System **/**/**** **:**:*';
white-space: pre;
}
}
/*横幅560px~*/
@media screen and (min-width: 559px) {
p#startup-message {
font-size: 1vw;
}
}

div#flameTerminal {
width: 90%;
height: 95%;
margin: 0px;
padding: 1vw;
background-color: #3a3a3a;
}
div#bodyTerminal {
width: 99%;
height: 98%;
padding: 0.5vw;
border-radius: 18vw 18vw 18vw 18vw / 2vw 2vw 2vw 2vw;
background-color: #0a0a0a;
}
div#bodyTerminal p {
font-size: 1vw;
color: #12df12;
}
text {
font-size: 1vw;
fill: #12df12;
}
rect.hyder {
x: 0;
y: 0;
width: 100%;
height: 100%;
fill: #0a0a0a;
}
</style>
</head>
<body>
<div id ="flameTerminal"> <!--ターミナル外枠-->
<div id ="bodyTerminal"><!--ターミナル画面-->
<p id ="startup-message">ジャパリパーク保安調査隊へようこそ:JPSRT32。 JPSRT Network System **/**/**** **:**:**</p>
<svg id ="cambus" style ="width: 100%; height: 90%;" viewBox ="0 0 100vw 100vw">
<text y= "1vw" id ="button1">
[2059/09/24]
</text>
<text y= "2vw" id ="button2">
[2059/09/25]
</text>
<text y= "3vw" id ="button3">
[2059/09/28]
</text>
<rect class ="hyder">
<animate attributeName="height" attributeType="XML" begin="buttonLogin.click" to="0" calcMode="discrete" dur="1ms" fill="freeze" repeatCount="never" id="clickLogin"/>
</rect>
<text y= "1vw" id ="buttonLogin">
<animate attributeName="fill" attributeType="XML" begin="buttonLogin.click" to="#0a0a0a" calcMode="discrete" dur="1ms" fill="freeze" repeatCount="never" id="clickLogin"/>
<animate attributeName="y" attributeType="XML" begin="buttonLogin.click" to="200vw" calcMode="discrete" dur="1ms" fill="freeze" repeatCount="never" id="clickLogin"/>
[Log in]
</text>
</svg>
</div>
</div>
</body>
</html>
編集者
47

回編集

案内メニュー