Kumpulan Trick Blog TErbaru

About

New Trick hayalah blog kecil yang mencoba untuk memberikan dan menyajikan trick dan tips tentang blog
Sabtu, 20 Juni 2015

Membuat Gambar Bergerak Dengan Efek Pulse atau Berdenyut

Beberapa waktu yang lalu saya pernah membuat artikel tentang cara membuat gambar bergerak dengan beberapa efek yaitu berkedip atau blink, membesar jika disorot atau didekati oleh cursor mouse dan beberapa efek lainnya yang memiliki tampilan berbeda dari setiap efek yang ditimbulkannya. Dan salah satu efek terbaru dari gambar bergerak yang dapatkan adalah efek pulse atau berdenyut. Dan jika dilihat dari DEMO dibawah ini sepintas gambar bergerak dengan efek pulse ini hampir sama dengan efek Blink atau bisa juga perpaduan antara efek Zoom dan Blink yang bergerak lebih cepat secara konstan. Namun jika dilihat dari kode masing-masing efek baik itu efek pulse atau berdenyut, blink atau berkedip dan zoom atau membesar tidak memiliki persamaan yang berarti malah berdiri sendiri dengan pengaturan tag kode CSS didalamnya. Apakah membuat gambar bergerak dengan efek berdenyut ini menggunakan CSS dan Script?

Membuat Gambar Bergerak Dengan Efek Pulse atau Berdenyut

Jika teman-teman blogger ini membuat gambar bergerak dengan efek pulse kedalam blog kalian semua, cobalah menggunakan cara yang saya bagikan berikut dibawah ini. Namun sebelum membuat efek berdenyut tersebut, alangkah baiknya jika teman-teman melihat juga dari efek Blink yang saya bagikan sebelumnya di Membuat Efek Blink dan bandingkan dengan efek berdenyut dibawah ini

KODE CSS GAMBAR BERGERAK DENGAN EFEK PULSE

<style type="text/css">
.pulseit{display:inline-block;-webkit-animation:pound .5s infinite;animation:pound .5s infinite;}
@keyframes pound {from {transform:none;}50% {transform:scale(1.4);}to {transform:none;}}
</style>

Untuk membuat gambar bergerak dengan efek pulse atau berdenyut seperti yang terlihat pada gambar, silahkan salin kode CSS diatas kedalam kode template blog sobat. Kode CSS tersebut bebas diletakkan dimana saja, di pengeditan template, didalam widget blog atau didalam penulisan artikel langsung. Selain digunakan untuk memberikan fungsi gerak dengan efek pulse pada gambar, triks ini juga bisa digunakan untuk teks seperti yang terlihat dibawah ini;

Dag.. Dig.. Dug...

Jika teman-teman tertarik untuk membuat gambar bergerak dengan efek pulse seperti yang terlihat pada demo diatas baik itu untuk gambar atau teks, silahkan gunakan kode CSS diatas. Dan tidak perlu kuatir mengenai penggunaan kode CSS pada efek ini karena tidak akan mempengaruhi loading blog sama sekali dan yang pasling utama adalah tidak ada penggunaan script didalamnya. Terimakasih




Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

TOP