Pamer enam kad warna, hitam – kelabu

Warna kad: #444444, #888888, #bbbbbb, #d3d3d3, #e5e5e5, #f2f2f2,

Demo

#f2f2f2

#e5e5e5

#d3d3d3

#bbbbbb

#888888

#444444

HTML view ▼

<div class="labu">
<div class="labi">
  <div>#f2f2f2</div>
  <div>#e5e5e5</div>
  <div>#d3d3d3</div>
  <div>#bbbbbb</div>
  <div>#888888</div>
  <div style="color: #f3f3f3;">#444444</div>
</div>
</div>
<style>
  .labu {
   background: #ffffff;
   height: 280px;
    font-size: 12px;
    padding-top: 3em;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
  .labi {
  display: block;
  text-align: center;
  position: relative;  
}
.labi div {
  width: 80px;
  height: 180px;
  position: absolute;
  top: 0px;
  border-radius: 5px;
  border-top: solid 2px rgba(100, 100, 100, 0.2);
  border-left: solid 3px rgba(255, 255, 255, 0.2);
  border-bottom: solid 3px rgba(0, 0, 0, 0.2);
  text-align: center;
  box-sizing: border-box;
  transform-origin: center 100%;
  display: inline-block;
  backface-visibility: hidden;
  margin-left: -40px;
  transform: rotate(0deg);
}
.labi div:nth-child(1) {
  background-color: #f2f2f2;
  animation: gerak 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.labi div:nth-child(2) {
  background-color: #e5e5e5;
  animation: pusing 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.labi div:nth-child(3) {
  background-color: #d3d3d3;
  animation: putar 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.labi div:nth-child(4) {
  background-color: #bbbbbb;
  animation: arah 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.labi div:nth-child(5) {
  background-color: #888888;
  animation: kkanan 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.labi div:nth-child(6) {
  background-color: #444444;
  animation: hujung 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes gerak {
  0% {
    transform: rotate(0deg);
  }
  10%,
  80% {
    transform: rotate(-70deg);
  }
  90% {
    transform: rotate(0deg);
  }
}
@keyframes pusing {
  0% {
    transform: rotate(0deg);
  }
  10%,
  80% {
    transform: rotate(-42deg);
  }
  90% {
    transform: rotate(0deg);
  }
}
@keyframes putar {
  0% {
    transform: rotate(0deg);
  }
  10%,
  80% {
    transform: rotate(-14deg);
  }
  90% {
    transform: rotate(0deg);
  }
}
@keyframes arah {
  0% {
    transform: rotate(0deg);
  }
  10%,
  80% {
    transform: rotate(14deg);
  }
  90% {
    transform: rotate(0deg);
  }
}
@keyframes kkanan {
  0% {
    transform: rotate(0deg);
  }
  10%,
  80% {
    transform: rotate(42deg);
  }
  90% {
    transform: rotate(0deg);
  }
}
@keyframes hujung {
  0% {
    transform: rotate(0deg);
  }
  10%,
  80% {
    transform: rotate(70deg);
  }
  90% {
    transform: rotate(0deg);
  }
}
</style>

Tutup