Zoom Text dengan CSS

Ini adalah effek zoom text apabila mouse diarahkan maka salah satu text tersebut akan membesar dan setelah mouse tidak diarahkan lagi pada text tersebut maka text tersebut kembali ke posisi ukuran text sebelumnya.
Tampilan atau animasi text website tersebut di buat dengan menggunakan CSS (Cascading Style Sheet) jadi halaman sangat lah ringan dalam pengaksesan halaman website tersebut, tidak seperti halnya animasi yang di buat dengan menggunakan flash.

untuk melihat singkat mengenai skrip CSS (Cascading Style Sheet) yang digunakan, lihatkan script di bawah ini :

style.css
.character{
     font-size:50px;
     color:#333; font-family:Georgia, "Times New Roman", Times, serif;
     cursor:pointer;
 }
#text{
     float:left;
     height:50px;
     width:20px;
     -moz-transform:scale(.5);
     -moz-transition:all .5s;
     -webkit-transform:scale(.5);
     -webkit-transition:all .5s;
     -o-transform:scale(.5);
     -o-transition:all .5s;
      transform:scale(.5);
      transition:all .5s;
 }
 #text:hover{
      -moz-transform:scale(1);
      -webkit-transform:scale(1);
      -o-transform:scale(1);
      transform:scale(1);
 }
index.html
<html>
<body>
  <div id="text"> 
     <h1 class=".character"> A </h1>
 
  </div>
 
  <div id="text"> 

     <h1 class=".character"> N </h1>
 
  </div>
 
  <div id="text"> 

     <h1 class=".character"> T </h1>
 
  </div>
 
  <div id="text"> 

     <h1 class=".character"> O </h1>
  </div>
</body>
</html>
Klik Here to Demo
Klik Here to Download

2 komentar

  1. Kalau memakai letteringJS lebih simpel Mas, nggak perlu ekstra markup lagi. :D

    BalasHapus
  2. ohh gtu yah???
    tapi berat mana emang???

    BalasHapus

 


Most Reading

Cek Ongkir

Cek Pengiriman