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


CSS TRANSITION: ANIMASI CONTOH KE 2
July 5, 2010
Posted by: Fauzie


Satu lagi contoh yang tidak kurang hebatnya animasi yang boleh dibuat dengan CSS ialah seperti yang ditunjukkan di bawah ini.


Dalam demo ini anda akan dapat image atau gambar seolah-olah "melayang" ke arah anda apabila cursor di hover ke atas image. Efek ini terjadi dengan membuat image "membesar" dan juga dengan membuat "bayang-bayang" memanjang.

"Live Demo"

Sila hover cursor ke atas image.

Crystal Mosque, Kuala Terengganu


Jom kita perhatikan kod-kod CSS dan HTMLnya.

<html>
<head>
<style type="text/css">
a.gambar {
color: #333;
font-family:"Lucida handwriting", "Snell Roundhand", "Helvetica
Neue",Arial,Helvetica,sans-serif;
font-size: 10px;
display: block;
margin: 10em auto 0 auto;
text-decoration: none;
color: #333;
padding: 13px 13px 26px 13px;
width: 240px;
border: 1px solid #BFBFBF;
background-color: white;
z-index: 2;
font-size: 0.8em;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-transition: all 0.5s ease-in;
}
a.gambar:hover,
a.gambar:focus,
a.gambar:active
{
z-index: 999;
border-color: #6A6A6A;
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: rotate(0deg) scale(1.05);
-moz-transform: rotate(0deg) scale(1.05);
transform: rotate(0deg) scale(1.05);
}
.gambar img {
margin: 0 0 15px;
}

a img {
border: none;
display: block;
}
</style>
</head>
<body>
<div class="photo-album"><a href="http://farm4.static.flickr.com/3298/3499711643_cbab59812d_m.jpg/" class="gambar"><img src="http://farm4.static.flickr.com/3298/3499711643_cbab59812d_m.jpg" alt=""><h3>Crystal Mosque, Kuala Terengganu</h3></a>
</div>
</body>
</html>


Kembali kepada | Archives →

Sebarang komen dan pertanyaan, sila klik butang di bawah ini: