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.
www.editblogtema.net

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

Post a Comment

Ajukan pertanyaan, kami mungkin tidak bisa langsung menjawabnya. Namun pertanyaan anda mungkin berguna dan penting bagi pembaca blog ini.

Terimakasih

Salam dari Admin
Anissa Auliasari