Skip to content

Instantly share code, notes, and snippets.

@ncaq

ncaq/baseballgame.css

Created June 11, 2018 14:26
Show Gist options
  • Save ncaq/6187e0f25d9fe772ee9ca9bba7e2b0af to your computer and use it in GitHub Desktop.
Save ncaq/6187e0f25d9fe772ee9ca9bba7e2b0af to your computer and use it in GitHub Desktop.
Download ZIP
HTMLとCSSのみ(JavaScriptなし)で作られたしょぼい野球ゲーム.2015年05月に作成
Raw
baseballgame.css
input {
display: none;
}
label {
display: none;
}
#pitchStart {
color: #ff4500;
background-color: #7cfc00;
width: 10vw;
height: 10vw;
text-align: center;
margin-left: 20vw;
}
[id="init"]:checked ~ #pitchStart {
display: block;
}
[id="hit"]:checked ~ #pitchStart {
display: block;
}
[id="pitch"]:checked ~ #trap {
display: block;
background-color: transparent;
width: 100vw;
height: 100vh;
}
#ball {
display: block;
position: absolute;
background-color: #333333;
width: 10vw;
height: 10vw;
border-radius: 50%;
top: 0;
transition-property: left;
left: calc(100vw - 10vw);
}
[id="pitch"]:checked ~ #ball {
display: block;
transition-property: left;
transition-duration: 4s;
left: 0;
}
[id="hit"]:checked ~ #ball {
display: block;
transition-property: left;
transition-duration: 4s;
left: calc(100vw - 10vw);
}
Raw
baseballgame.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>野球ゲーム</title>
<link rel="stylesheet" href="baseballgame.css"/>
</head>
<body>
<input type="radio" name="mode" id="init" checked="checked"/>
<input type="radio" name="mode" id="pitch"/>
<input type="radio" name="mode" id="hit"/>
<label for="pitch" id="pitchStart">ピッチ</label>
<label for="init" id="trap"></label>
<label for="hit" id="ball"></label>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment