Cara Mempercantik Blog dengan Efek Animasi Bergerak

Efek animasi bergerak disini ada dua macam, ada yang harus disentuh (hover) dulu baru efek animasinya bekerja dan ada juga yang otomatis langsung bergerak. Dan kedua efek tersebut akan saya jelaskan secar detail.

Efek Animasi Bergerak dengan Hover

Kita akan melanjutkan kode css tombol 'tekan' diatas, untuk membuatnya bergerak atau lebih tepatnya berputar saat kursor menyentuh tombol, maka kita perlu menambahkan efek css rotate berikut ini.

CSS

.tombol {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;
}

.tombol:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg); transform: rotate(360deg);
}

Dan hasilnya nanti akan seperti tombol dibawah ini.

Tekan

Jadi dengan menerapkan efek css animasi rotate, bukan hanya lebih keren, tapi juga akan membuat blog Anda lebih menarik dan atraktif, dan ujung-ujungnya akan membuat pengunjung betah.

Efek Animasi Bergerak dengan Marquee

Jika Anda ingin mempercantik blog dengan animasi bergerak namun tanpa perlu disentuh, maka kode css Marquee adalah jawabannya. Namun disini saya tidak akan menjelaskan lagi bagaimana cara menggunakan efek berjalan marquee, karena pada artikel sebelumnya sudah saya jelaskan secara detail beserta cara memodifikasi kode marquee.

Singkatnya untuk membuat efek marquee / efek berjalan, maka kita harus mengapitnya dengan kode html marquee seperti dibawah ini.

HTML

<marquee>letakkan teks / gambr / video disini</marquee>

Kedua efek diatas sebenarnya bisa digabungkan yaitu dengan menambahkan property pada selector marquee, selanjutnya tinggal Anda tambahkan efek hover.