A Pen by Paul Rudge.

index.html

<main class="l-center" id="newgame">
  
  <h1>Rock<strong>et</strong>, paper, <strong>scss</strong>ors</h1>
  
  <p>Choose your hand...</p>

  <a id="rock" href="#rock" class="playerplay fa fa-rocket fa-4x"></a>
  <a id="paper" href="#paper" class="playerplay fa fa-file-o fa-4x"></a>
  <a id="scissors" href="#scissors" class="playerplay fa fa-cut fa-4x"></a>

  <div class="result">
      <h2 class="resultTitle">Result</h2> 
      <span id="a" class="pcplay fa fa-rocket fa-4x"></span>
      <span id="b" class="pcplay fa fa-file-o fa-4x"></span>
      <span id="c" class="pcplay fa fa-cut fa-4x"></span>
  </div>
  <a href="#newgame" class="reset">Play again</a>
</main>

Rock(et),-paper,-(scss)ors.markdown

Rock(et), paper, (scss)ors

A version of rock, paper and scissors built entirely in css and html.

A Pen by Paul Rudge on CodePen.

License.

style.scss

@import "compass/css3";
body {
    font-family: 'Belleza', sans-serif;
    color: #999;
}

h1 strong {
    color: #3e9ac5;
}

a {
    color: #3e9ac5;
}

.l-center {
    width: 500px;
    margin: 0 auto;
    display: block;
}

.playerplay {
    display: inline-block;
    margin-right: 10px;
    opacity: 0.5;
}

.playerplay:hover {
    display: inline-block;
    margin-right: 10px;
    opacity: 1;
    transition: opacity .3s linear 0s;
}

.playerplay, .pcplay {
    transition: color .3s linear 0s;
    @include border-radius(50%);
    background: #ccc;
    padding: 40px;
    text-decoration: none;
    color: #000;
    text-align: center;
}

.playerplay:target {
    color: #3e9ac5;
    cursor: default;
}

.pcplay {
    background: #ccc;
    width: 60px;
    position: absolute;
    margin-top: 20px;
    color: #fff;
    display: block;
    top: 20px;
  opacity: 0.8;
}
.pcplay:after {
    position: absolute;    
    top: 8px;
    left: 150px;
    width: 300px;  
    font-family: 'Belleza',sans-serif;
    color: #000;
    background: #fff;
    z-index: 0;
    content: "Picking...";
    line-height: 2;
}

.result {
    position: relative;
    height: 200px;  
}

.playerplay:target ~ .result {
    display: block;
}

.playerplay:target ~ .result > .pcplay {

    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
    opacity: 1;
}

.reset {
    display: none;
}

.playerplay:target ~ .reset {
    display: block;
    text-align: center;
    font-size: 20px;
}

#rock:target ~ .result > #b, #paper:target ~ .result > #c, #scissors:target ~ .result > #a {
    background-color: #FF6961;
}

#rock:target ~ .result > #b:after, #paper:target ~ .result > #c:after, #scissors:target ~ .result > #a:after {
    content: "You lose";
    color: #999;
    
}

#rock:target ~ .result > #c, #paper:target ~ .result > #a, #scissors:target ~ .result > #b {
    background-color: #77DD77;
}

#rock:target ~ .result > #c:after, #paper:target ~ .result > #a:after, #scissors:target ~ .result > #b:after {
    content: "You win";
    color: #999;
}

#rock:target ~ .result > #a, #paper:target ~ .result > #b, #scissors:target ~ .result > #c {
    background-color: #FFB347;
}

#rock:target ~ .result > #a:after, #paper:target ~ .result > #b:after, #scissors:target ~ .result > #c:after {
    color: #999;
    content: "You draw";
}


@-webkit-keyframes randomHand {
    0% {
        z-index: 1;
    }
    
    50% {
        z-index: 1;
    }
  
    51% {
         z-index: 0;
    }

    100% {
        z-index: 0;
    }
}

@-moz-keyframes randomHand {
    0% {
        z-index: 1;
    }
    
    50% {
        z-index: 1;
    }
  
    51% {
         z-index: 0;
    }

    100% {
        z-index: 0;
    }
}

@-o-keyframes randomHand {
  0% {
        z-index: 1;
    }
    
    50% {
        z-index: 1;
    }
  
    51% {
         z-index: 0;
    }

    100% {
        z-index: 0;
    }
}

@keyframes randomHand {
    0% {
        z-index: 1;
    }
    
    50% {
        z-index: 1;
    }
  
    51% {
         z-index: 0;
    }

    100% {
        z-index: 0;
    }
}

.pcplay {
    -webkit-animation-duration: 0.56s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transition-timing-function: 1;
  
    -moz-animation-duration: 0.56s;
    -moz-animation-iteration-count: infinite;
    -moz-transition-timing-function: 1;
  
    -o-animation-duration: 0.56s;
    -o-animation-iteration-count: infinite;
    -o-transition-timing-function: 1;
  
    animation-duration: 0.56s;
    animation-iteration-count: infinite;
    transition-timing-function: 1;
}
#a, #b, #c {
  -webkit-animation-name: randomHand;
  -moz-animation-name: randomHand;
  -o-animation-name: randomHand;
  animation-name: randomHand;
}


#b {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

#c {
  -webkit-animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  -o-animation-duration: 0.4s;
  animation-duration: 0.4s;
}