form
input.you type='radio' id='you-1' name='you'
input.you type='radio' id='you-2' name='you'
input.you type='radio' id='you-3' name='you'
input.skynet type='radio' id='skynet-1' name='skynet'
input.skynet type='radio' id='skynet-2' name='skynet'
input.skynet type='radio' id='skynet-3' name='skynet'
div.options
label.r for='you-1'
label.p for='you-2'
label.s for='you-3'
div.game
div.go
label for='skynet-1'
label for='skynet-2'
label for='skynet-3'
div.it
div.r
div.p
div.s
div.results
div.win Win
div.lose Lose
div.tie Tie
button type="reset" Again
View Compiled
$bg: #E5E0BE;
$size: 120px;
html,
body,
form {
height: 100%;
}
body {
background: $bg;
font-family: 'Slabo 27px', serif;
}
form {
align-items: center;
display: flex;
justify-content: center;
}
input {
left: 50%;
opacity: 0.01;
position: fixed;
top: 50%;
}
.options {
display: flex;
flex-direction: column;
margin: 0 60px;
label {
background-color: #E0D6AF;
background-position: center;
background-repeat: no-repeat;
background-size: 60%;
border-radius: 50%;
cursor: pointer;
display: block;
height: $size;
margin: 10px auto;
transition: transform 0.2s;
transform: scale(1);
width: $size;
&:hover {
background-color: #D1C79F;
background-size: 65%;
}
&.r {
background-image: url('http://www.jerrylow.com/demo/rps/rock.svg');
background-size: 50%;
&:hover {
background-size: 55%;
}
}
&.p {
background-image: url('http://www.jerrylow.com/demo/rps/paper.svg');
}
&.s {
background-image: url('http://www.jerrylow.com/demo/rps/scissor.svg');
}
}
}
input.you:checked ~ .options label {
transform: scale(.8);
}
input.you:nth-of-type(1):checked ~ .options label.r,
input.you:nth-of-type(2):checked ~ .options label.p,
input.you:nth-of-type(3):checked ~ .options label.s {
background-color: #BFCCA3;
transform: scale(1.25);
}
.it {
display: flex;
flex-direction: column;
margin: 0 60px;
width: $size;
div {
background-color: #C9A185;
background-position: center;
background-repeat: no-repeat;
background-size: 60%;
border-radius: 50%;
display: none;
height: $size;
transform: scale(1.25);
width: $size;
&.r {
background-image: url('http://www.jerrylow.com/demo/rps/rock.svg');
background-size: 50%;
}
&.p {
background-image: url('http://www.jerrylow.com/demo/rps/paper.svg');
}
&.s {
background-image: url('http://www.jerrylow.com/demo/rps/scissor.svg');
}
}
}
.game {
border-radius: 50%;
height: $size;
overflow: hidden;
position: relative;
width: $size;
z-index: 10;
&:before,
&:after {
align-items: center;
background: lighten(#706C59, 20%);
color: white;
content: 'Choose your weapon';
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
z-index: 2;
}
&:after {
background: #706C59;
content: 'Fight!';
cursor: pointer;
font-size: 26px;
pointer-events: none;
transition: font 0.2s;
z-index: 1;
}
&:hover:after {
font-size: 30px;
}
.go {
animation-duration: .02s;
animation-name: random;
animation-iteration-count: infinite;
display: flex;
flex-direction: column;
&:active {
animation-play-state: paused;
}
}
label {
cursor: pointer;
height: $size;
width: $size;
}
}
input.skynet:checked ~ .game .go {
animation-play-state: paused;
}
@keyframes random {
from {
transform: translateY(0px);
}
to {
transform: translateY(-#{$size * 2});
}
}
/**
* Start
**/
input.you:checked ~ .game:before {
display: none;
}
/**
* Results
**/
input#you-1:checked ~ input#skynet-1:checked,
input#you-2:checked ~ input#skynet-2:checked,
input#you-3:checked ~ input#skynet-3:checked {
~ .results .tie {
display: flex;
}
}
input#you-1:checked ~ input#skynet-3:checked,
input#you-2:checked ~ input#skynet-1:checked,
input#you-3:checked ~ input#skynet-2:checked {
~ .results .win {
display: flex;
}
}
input#you-1:checked ~ input#skynet-2:checked,
input#you-2:checked ~ input#skynet-3:checked,
input#you-3:checked ~ input#skynet-1:checked {
~ .results .lose {
display: flex;
}
}
input#skynet-1:checked ~ .it .r,
input#skynet-2:checked ~ .it .p,
input#skynet-3:checked ~ .it .s {
display: flex;
}
input.you:checked ~ input.skynet:checked ~ .results {
display: flex;
}
.results {
align-items: center;
display: none;
bottom: 0;
flex-direction: column;
justify-content: center;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 100;
.win,
.lose,
.tie {
align-items: center;
background: #D1B354;
border-radius: 50%;
color: white;
display: none;
font-size: 40px;
height: $size + 20px;
justify-content: center;
width: $size + 20px;
}
button {
background: #706C59;
border: none;
border-radius: 3px;
color: white;
cursor: pointer;
height: 40px;
margin: 20px 0 -60px;
width: 80px;
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.