Vote with CSS3

Vote with CSS3 | css lagi kawan haha :*
setelah sebelumnya saya share Cara Mencegah Pencurian Artikel Blog Dengan CSS sekarang saya posting Vote With CSS3.. Liat penampakannya di bawah :

<html>
<head>
  <title>Make Animated Skill Bars with CSS3 :: RPL4rt</title>
</head>
<body>
  <div class="skimiler">
 <div class="skiller col">
        <ul id="skill">
            <li><span class="expand nyol"> <small>55%</small></span><em>Nyolong</em></li>
            <li><span class="expand nyom"> <small>65%</small></span><em>Nyomot</em></li>
            <li><span class="expand nyok"> <small>75%</small></span><em>Nyokot</em></li>
            <li><span class="expand nyik"> <small>85%</small></span><em>Nyikat</em></li>
            <li><span class="expand nyon"> <small>100%</small></span><em>Nyontek</em></li>
        </ul>
    </div>
</div>
</body>
</html>

nah kalo yang di bawah untuk cssnya

body {background:#debe94;}
.skimiler {
  width: 400px;
  margin: 10px auto;
}
.skiller {
  margin: 35px;
  font-size: 12px;
  line-height: 2em;
  position: absolute;
}
.col {
  width: 350px;
}
#skill {
  list-style: none outside none;
}
#skill li {
  background: #333;
  height: 23px;
  margin-bottom: 20px;
  margin-left: -40px;
  width: 350px;
}
#skill li em {
  position: relative;
  top: -22px;
}
#skill li small {
  margin-left: 10px;
}
#skill span {
  color: #fff;
  padding-bottom: 3px;
}
.expand {
  background: #F60;
  height: 20px;
  position: absolute;
  left: 0;
}
.nyol {
  width: 55%;
  -moz-animation: nyol 2s ease-out;
  -webkit-animation: nyol 2s ease-out;
}
.nyom {
  width: 65%;
  -moz-animation: nyom 2s ease-out;
  -webkit-animation: nyom 2s ease-out;
}
.nyok {
  width: 75%;
  -moz-animation: nyok 2s ease-out;
  -webkit-animation: nyok 2s ease-out;
}
.nyik {
  width: 85%;
  -moz-animation: nyik 2s ease-out;
  -webkit-animation: nyik 2s ease-out;
}
.nyon {
  width: 100%;
  -moz-animation: nyon 2s ease-out;
  -webkit-animation: nyon 2s ease-out;
}
@keyframes nyol {
  0% {
    width: 0;
  }
  100% {
    width: 55%;
  }
}
@keyframes nyom {
  0% {
    width: 0;
  }
  100% {
    width: : 65%;
  }
}
@keyframes nyok {
  0% {
    width: 0;
  }
  100% {
    width: : 75%;
  }
}
@keyframes nyik {
  0% {
    width: 0;
  }
  100% {
    width: : 85%;
  }
}
@keyframes nyon {
  0% {
    width: 0;
  }
  100% {
    width: : 100%;
  }
}
@-webkit-keyframes nyol {
  0% {
    width: 0;
  }
  100% {
    width: 55%;
  }
}
@-webkit-keyframes nyom {
  0% {
    width: 0;
  }
  100% {
    width: : 65%;
  }
}
@-webkit-keyframes nyok {
  0% {
    width: 0;
  }
  100% {
    width: : 75%;
  }
}
@-webkit-keyframes nyik {
  0% {
    width: 0;
  }
  100% {
    width: : 85%;
  }
}
@-webkit-keyframes nyon {
  0% {
    width: 0;
  }
  100% {
    width: : 100%;
  }
}

Liat Demonya

Anda baru saja membaca artikel yang berkategori CSS / Web dengan judul Vote with CSS3. Anda bisa bookmark halaman ini dengan URL http://rpl4rt.blogspot.com/2013/04/vote-with-css3.html?m=0. Terima kasih!