EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

body {
  color: #fff;
  font-size: 50%;
  font-family: 'Baloo', sans-serif;
  background-color: #222;
}

h1 {
  position: relative;
  z-index: 1;
  padding: 0.8125em;
  font-size: 5em;
  text-align: center;
}

p {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0.5em 0;
  font-size: 1.5em;
  text-align: center;
  text-transform: uppercase;
}

p::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -402%;
  left: 50%;
  width: 6em;
  height: 0.375em;
  transform: translateX(-50%);
  background-color: #000;
  border-radius: 1em;
  opacity: 0.075;
}

#world {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40em;
  height: 40em;
  transform: translate(-50%,-50%);
  overflow: hidden;
  background-color: #adf;
  box-shadow: 0 2em 2em -1em #000;
}

.clouds {
  position: absolute;
  top: 3em;
  left: 2em;
  width: 5em;
  height: 5em;
  color: #fff;
  background-color: currentColor;
  border-radius: 50%;
  box-shadow:
    2.5em -0.25em 0 0.5em, 5em 0 0 -0.5em,
    13em 1em, 16em 0 0 1em, 19em 0 0 -0.5em,
    26em 0 0 -0.5em, 28.5em -0.25em 0 0.5em, 31em 0 0 -0.5em;
  opacity: 0.3;
}

.land {
  position: absolute;
  bottom: 0;
  left: -20%;
  width: 140%;
  height: 33%;
  background-color: #752;
  box-shadow:
    0 -0.525em #4b4,
    inset 0 1em #4b4;
}

.land::after,
.land::before {
  content: '';
  position: absolute;
  left: 0;
}

.land::before {
  z-index: 1;
  top: 0.5em;
  width: 8em;
  height: 4em;
  color: #5c5;
  background-color: currentColor;
  border-radius: 0 0 4em 4em / 0 0 3em 3em;
  box-shadow:
    0 0.5em rgba(0,0,0,0.3),
    8em 0, 8em 0.5em rgba(0,0,0,0.3),
    16em 0, 16em 0.5em rgba(0,0,0,0.3),
    24em 0, 24em 0.5em rgba(0,0,0,0.3),
    32em 0, 32em 0.5em rgba(0,0,0,0.3),
    40em 0, 40em 0.5em rgba(0,0,0,0.3),
    48em 0, 48em 0.5em rgba(0,0,0,0.3);
}

.land::after {
  bottom: -0.5em;
  width: 100%;
  height: 100%;
  background-size: 8em 61%;
  background-image:
    linear-gradient(
      -45deg,
      rgba(0,0,0,0.15) 25%,
      transparent 25%, 50%,
      rgba(0,0,0,0.15) 50%, 75%,
      transparent 75%
    );
}

.walk-right .land {
  animation: track 500ms infinite;
}

.walk-left .land {
  animation: track 500ms infinite reverse;
}

.player {
  position: absolute;
  z-index: 10;
  bottom: 33%;
  left: 50%;
  width: 8em;
  height: 8em;
  margin-left: -4em;
  transform-origin: 100% 100%;
  background-color: #fff;
  border-radius: 1.75em;
}

.face {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  margin: -40% 0 0 -40%;
  transform-origin: 50% 50%;
}

.face::before,
.face::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: currentColor;
  transition: 100ms;
}

.face::before {
  top: 40%;
  width: 1.5em;
  height: 1.25em;
  margin-left: -2em;
  transform-origin: 20% 50%;
  color: #333;
  border-radius: 60% / 60% 60% 30% 30%;
  box-shadow: 4em 0;
}

.face::after {
  bottom: 0.25em;
  width: 3em;
  height: 1.75em;
  color: #ddd;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.walk-right .player {
  animation: walk 500ms infinite;
}

.walk-right .player::before {
  animation: stabilize2 500ms infinite;
}

.walk-right .face {
  animation: stabilize 500ms infinite;
}

.walk-left .player {
  animation: walk 500ms infinite reverse;
}

.walk-left .face {
  animation: stabilize 500ms infinite reverse;
}

[class*="walk"] .face::before {
  transform: scale(1.25,1.5) translate(-35%,-30%);
  border-radius: 50% / 50% 50% 35% 35%;
  box-shadow: 2.9375em 0;
}

[class*="walk"] .face::after {
  transform: translateX(-50%) scale(1.5);
}

@keyframes track {
  100% { transform: translateX(-8em); }
}

@keyframes walk {
  100% { transform: translateX(-8em) rotate(90deg); }
}

@keyframes stabilize {
  100% { transform: rotate(-90deg); }
}

HTML

Recommendation

Join Effecthub.com