EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

body{
  text-align:center;
  background:#222;
}

.walls{
border-width: 40px;
border-style: solid;
display: inline-block;
  border-top-color: #444;
  border-left-color: black;
  border-bottom-color: black;
  border-right-color: black;
  position:relative;
  -webkit-animation: walls 3s infinite linear;
  margin-top: 1%;
}

.floor{
border-width: 60px;
border-style: solid;
display: block;
  border-top-color: #666;
  border-left-color: black;
  border-bottom-color: black;
  border-right-color: black;
  -webkit-animation: floor 3s infinite linear;
}

.spin{
  position:absolute;
height: 80%;
width: 80%;  
top: 10%;
  border-radius: 100%;
  left: 10%;
  box-sizing: border-box;
  border-width: 3px;
border-style: solid;
  border-top-color: white;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
  -webkit-animation: spinner 3s infinite linear;
}

@-webkit-keyframes spinner {
  0%   { -webkit-transform: rotate(10deg); }
  100% { -webkit-transform: rotate(370deg); }
}

@-webkit-keyframes walls {
  0%   {   border-top-color: #333;
  border-left-color: #111;
  border-bottom-color: black;
  border-right-color: #222; }
  25% {   border-top-color: #111;
  border-left-color: black;
  border-bottom-color: #222;
  border-right-color: #333; }
    50% {   border-top-color: black;
  border-left-color: #222;
  border-bottom-color: #333;
  border-right-color: #111; }
    75% {   border-top-color: #222;
  border-left-color: #333;
  border-bottom-color: #111;
  border-right-color: black; }
    100% {   border-top-color: #333;
  border-left-color: #111;
  border-bottom-color: black;
  border-right-color: #222; }
}

@-webkit-keyframes floor {
  0%   {   border-top-color: #555;
  border-left-color: #333;
  border-bottom-color: black;
  border-right-color: #222; }
  25% {   border-top-color: #333;
  border-left-color: black;
  border-bottom-color: #222;
  border-right-color: #555; }
    50% {   border-top-color: black;
  border-left-color: #222;
  border-bottom-color: #555;
  border-right-color: #333; }
    75% {   border-top-color: #222;
  border-left-color: #555;
  border-bottom-color: #333;
  border-right-color: black; }
    100% {   border-top-color: #555;
  border-left-color: #333;
  border-bottom-color: black;
  border-right-color: #222; }
}

HTML

Recommendation

Join Effecthub.com