Gak Tau Juga ini namanya apa

by Adi Jaya

HTML

<div class="c-box">
  <h1>Gak Tau Juga ini namanya apa</h1>
  <p>Mungkin anda terinspirasi mau bikin mini game dari konsep super konyol ini.... monggo...</p>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div...

SCSS

body {
    padding: 40px;
    background: #6c93af;
    font-family: sans-serif;
    color: #f1f1f1;
    text-shadow: 0px 1px #151515;
}
h1,h2 {
  text-shadow: -2px 2px #444444;
}

p {
    font-size: 12px;
}

.c-box {
    text-align: center;
}

.box {
    width: 40px;
    height: 40px;
    background: #e0e6f1;
    display: inline-block;
    margin: 5px;
    box-shadow: 0px 1px 8px black;
    cursor: pointer;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

.box.active {
    transform: scale(1.5);
    background: #6c93af;
    box-shadow: 0px 1px 8px black;
    transition: all .7s cubic-bezier(0.99, 1.48, 0, -0.34);
    animation: colorchange 1s infinite linear;
    -webkit-animation: colorchange 1s infinite linear;
    -moz-animation: colorchange 1s infinite linear;
}

@keyframes colorchange{
  0%   {background: #f9c9ad;}
  25%  {background: #ff0000;}
  50%  {background: #f9c9ad;}
  75%  {background: #ff0000;}
  100% {background: #f9c9ad;}
}

@-webkit-keyframes colorchange{
  0%   {background: #f9c9ad;}
  25%  {background: #ff0000;}
  50%  {background: #f9c9ad;}
  75%  {background: #ff0000;}
  100% {background: #f9c9ad;}
}

@-moz-keyframes colorchange {
  0%   {background: #f9c9ad;}
  25%  {background: #ff0000;}
  50%  {background: #f9c9ad;}
  75%  {background: #ff0000;}
  100% {background: #f9c9ad;}
  }
}

JavaScript

$(function () {
//lagi kurang kerjaan
	var a = $('.box'),
  		b = $('.box.active');
	a.click(function() {
		a.removeClass('active');
    $(this).addClass('active');
	});

});