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 :
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%;
}
}
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
. Terima kasih!
Ditulis
oleh:
Dika
-
Minggu, 07 April 2013
Belum ada komentar untuk " Vote with CSS3"
Posting Komentar
Harap berkomentar sesuai dengan isi posting & komentar spam tidak akan ditampilkan.