Cataloged Autobiography BERKENAAN SAYA  Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca.. | The Readable Journal MENEROKA ARTIKEL  Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini | Astrolab Tool KATEGORI ARTIKEL  Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini |
 TRANSITION CSS3: CONTOH 2 |
| August 25, 2010 Posted by: Fauzie |
Dalam contoh pertama kita telah lihat bagaimana Transition CSS berupaya membuat animasi "box effect" iaitu menukar sebuah kotak menjadi bulat atau circular apabila cursor di hover di atas kotak.
Dalam contoh ke dua ini jom kita lihat bagaimana transition CSS memberi effect ke atas sesuatu huruf apabila huruf berkenaan dihover.
Sila hover cursor ke atas huruf dalam "Live Demo" di bawah ini:
Nota:Hanya sesuai untuk browser Safari, Chrome and Opera
Di bawah ini ialah kod CSS dan kod markup (html)
<html>
<head>
<style type="text/css">
.Huruf {
text-align: center;
padding: 10px;
margin: 10px;
background: transparent;
}
.Huruf .letters {
text-decoration: none;
font-weight: bold;
line-height: 100px;
}
.Huruf .letters span {
-moz-transition-duration: 1.5s;
-webkit-transition-duration: 1.5s;
-o-transition-duration: 1.5s;
font-size: 50px;
}
.Huruf .letters span:hover {
font-size: 100px;
}
.Huruf .letters span.green {
color: #547659;
text-shadow: 1px 1px 2px #8FC1A5;
}
.Huruf .letters span.green:hover {
color: #315637;
text-shadow: 5px 5px 5px #99ADA2;
}
.Huruf .letters span.red {
color: #874031;
text-shadow: 1px 1px 2px #C1998F;
}
.Huruf .letters span.red:hover {
color: #723B2F;
text-shadow: 5px 5px 5px #B4A09B;
}
.Huruf .letters span.blue {
color: #314A87;
text-shadow: 1px 1px 2px #8F9AC1;
}
.Huruf.letters span.blue:hover {
color: #2F3F72;
text-shadow: 5px 5px 5px #9B9FB4;
}
</style>
</head>
<body>
<div class="Huruf">
<a href="#" class="letters">
<span class="green">j</span>
<span class="green">o</span>
<span class="green">m</span>
<span class="red">b</span>
<span class="red">l</span>
<span class="red">o</span>
<span class="red">g</span>
<span class="blue">.</span>
<span class="blue">c</span>
<span class="blue">o</span>
<span class="blue">m</span>
</a>
</div>
</body>
</html>
<head>
<style type="text/css">
.Huruf {
text-align: center;
padding: 10px;
margin: 10px;
background: transparent;
}
.Huruf .letters {
text-decoration: none;
font-weight: bold;
line-height: 100px;
}
.Huruf .letters span {
-moz-transition-duration: 1.5s;
-webkit-transition-duration: 1.5s;
-o-transition-duration: 1.5s;
font-size: 50px;
}
.Huruf .letters span:hover {
font-size: 100px;
}
.Huruf .letters span.green {
color: #547659;
text-shadow: 1px 1px 2px #8FC1A5;
}
.Huruf .letters span.green:hover {
color: #315637;
text-shadow: 5px 5px 5px #99ADA2;
}
.Huruf .letters span.red {
color: #874031;
text-shadow: 1px 1px 2px #C1998F;
}
.Huruf .letters span.red:hover {
color: #723B2F;
text-shadow: 5px 5px 5px #B4A09B;
}
.Huruf .letters span.blue {
color: #314A87;
text-shadow: 1px 1px 2px #8F9AC1;
}
.Huruf.letters span.blue:hover {
color: #2F3F72;
text-shadow: 5px 5px 5px #9B9FB4;
}
</style>
</head>
<body>
<div class="Huruf">
<a href="#" class="letters">
<span class="green">j</span>
<span class="green">o</span>
<span class="green">m</span>
<span class="red">b</span>
<span class="red">l</span>
<span class="red">o</span>
<span class="red">g</span>
<span class="blue">.</span>
<span class="blue">c</span>
<span class="blue">o</span>
<span class="blue">m</span>
</a>
</div>
</body>
</html>
Kembali kepada | Archives →
Sebarang komen dan pertanyaan, sila klik butang di bawah ini:
