August 24, 2019

CARA MEMBUAT GAMBAR BERGONCANG SAAT DI SENTUH PADA ILUSTRASI BLOG

Banyak cara untuk menarik perhatian pemirsa agar terfokus pada satu tujuan, diantaranya membuat image atau gambar bererak pada saat disentuh kursor maupun jari pada postingan. Dan trik ini sangat ringan karena hanya menggunakan kode CSS.

1. Tambahkan CSS

Masuk ke pengaturan blogger>pilih tema atau theme> lalu pilih edit HTML:
edit HTML
Lalu cari kode </head> dan letakan kode CSS berikut tepat diatasnya, yakni di atas penutup </style>:
img:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }

Save template.
Lihat DEMO

www.editblogtema.net

A coding addict, a hard smoker, love boxing even not a boxer. Love maths even not a scientist

3 comments:

  1. Ohy, mas kalau kita pasang animasi di blog kita, apakah bakal melanggar kebijakan Google Adsense ngak...?

    ReplyDelete
  2. Keren nih, kayak kena gempa bumi 🤭

    ReplyDelete