.png)
Cara Membuat Animasi Efek Pada CSS "Efek berputar 360derajat"
Assallamuallaikum.Wr.wb oke kembali lagi dengan saya afiandy pada kesempatan kali ini
saya akan membagikan tutorial tentang Animasi Efek Pada CSS "Efek berputar 360derajat"
pada CSS oke langsung saja pertama-tama yang harus anda siapkan adalah
text editor,di sini saya menggunakan Brackets yang bisa anda download di Sini
oke langsung saja kita ke TKP:
Berikut kita buat script pada htmlnya sebagai berikut dengan CSS external:
<!doctype html>
<html>
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="warp">
<div id="kotak"></div>
</div>
</body>
</html>
dan script CSSnya adalah sebagai berikut:
*{
margin: 0;
padding: 0;
background: #0fb797;
}
#warp{
width: 100%;
margin: 0 auto;
}
#kotak{
margin: 0 auto;
width: 300px;
height: 300px;
background: white;
margin-top: 20px;
}
Np:saya menaruhkan "margin-top:20px" agar posisinya agak bawah pada contoh berikut
dan hasilnya seperti hanya terlihat lingkaran putih saja kan belum ada efeknya jika di
lewati okeh cursor / "hover" maka kita tambahkan efeknya sebagai berikut:
pada #kotak tambahkan script transition: all 0.5s ease-out; tepat di bawah margin-top:20px;
jika sudah lalu tambahkan script
#kotak:hover{
transform:rotate(360deg);
}
tepat di bawah tutup kurung kurawal dan semua menjadi seperti berikut:
*{
margin: 0;
padding: 0;
background: #0fb797;
}
#warp{
width: 100%;
margin: 0 auto;
}
#kotak{
margin: 0 auto;
width: 300px;
height: 300px;
background: white;
margin-top: 20px;
transition: all 0.5s ease-out;
}
#kotak:hover{
transform: rotate(360deg);
}
Mudahkan oke selamat menjoba dan terima kasih telah berkunjung di blog saya
Wassallam
test
ReplyDelete