Hello sobat ICloudzer sekarang admin bakalan memberikan informasi bagaimana caranya membuat animasi bergerak saat disentuh diblogger
Info: Okay jika kamunya sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama yak
Animasi Bergerak
Berbagai macam kode untuk bisa membuat animasi terkhususnya diblogger, sama hal nya dengan pembahasan kita kali ini, yups membahas bagaimana sih caranya membuat animasi bergerak saat disentuh
Bergerak saat disentuh
Nah cara untuk mengerakkan animasi ini adalah dengan disentuh, Kamu bisa melihat animasi tersebut bergerak pada saat kamu menyentuhnya
Contoh Tampilan
Jika kamu penasaran bagaimana pergerakan animasi saat disentuh kamu bisa melihat contoh tampilan yang sudah admin sediakan dibawah ini
Info: Bagaimana sobat dengan contoh tampilannya keren bukan
Cara Pembuatan
Cara pembuatan animasi bergerak saat disentuh ini mudah sekali sobat, sobat bisa pelajari lebih lanjut dengan membaca artikel ini hingga selesai okay
Kode CSS
Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini, kemudian kamu bisa tempelkan diatas kode ]]></b:skin>
.rahtouchme, .touchmerah{
margin:20px auto;
width:100px;
height:100px;
}
.rahtouchme{
background: #f80000;
color:white;
text-align: center;
padding:10px;
}
.rahtouchme:hover{
cursor:pointer;
animation-name:rotate;
animation-duration:1s;
animation-iteration-count: infinite;
}
@keyframes rotate{
from{
transfrom:rotate(0deg);
}
to{
transform:rotate(350deg);
}
}
.touchmerah{
background:#2980B9;
animation-name:rotate;
animation-duration:2s;
animation-iteration-count: infinite;
}InfoSobat juga bisa menggunakan Tag kode <style> untuk meletakkan kode CSS diatas
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan adalah menyalin kode HTML dibawah ini, kemudian kamu bisa menggunakan kode HTML tersebut sesuai keperluan kamu aja okay
<div class="rahtouchme">
Sentuh
</div>
<div class="touchmerah">
</div>Info: Fungsi dari kode HTML diatas adalah untuk menampilkan Animasi bergerak ketika disentuh tersebut