Untuk membuat animasi dalam sebuah website tidaklah sulit, dan untuk membuatnya pun banya cara yang bisa kita gunakan salah satunya adalah yang akan saya bahas pada kali ini yaitu cara membuat animasi gambar berputar menggunakan keyframe name di sini saya akan membuat objek berputar . Oke langsung saja pertama buka editor masing-masing, pada kali ini saya menggunakan dreamwever lalu buat semuat file html sebagai berikut :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>welcome to Dumetschool</title>
</head>
<body>
<div id="lue">
<div id="gua">
<img src="../img/images.jpg">
</div>
<h3 style="color: green">Data Diri</h3>
<p style="color: green">
Nama : Feri mispandi. S.kom <br>
TTL : Lubuklinggau SUMSEL & Cengkareng JAKBAR <br>
Pekerjaan : Staff IT <a href="http://www.dumetschool.com/" target="blank">Dumet school</a>
</p>
</div>
</body>
</html>Kemudian save file tersebut di folder masing masing, jika sudah buat file css nya, pada kesempatan kali ini saya menggunakan css internal yang saya sisipkan diantara tag <head> dan</head> lalu ketikan skrip berikut tuntuk mengatur perputaran elemen yang kita buat
@-webkit-keyframes putar {
from {-webkit-transform: rotateY(0deg);}
to {-webkit-transform: rotateY(-360deg);}}Lalu ketikan juga skrip berikut ini untuk mengatur id atau class yang kita buat pada file html tadi:
#lue{
margin: 1em auto;
background:pink;
width: 500px;
height: 500px;
position:relative;
}
#gua, #gua {
position: absolute;
top: 100px;
left: 94px;
width: 300px;
background:#ccc;
text-align: center;
color: #fff;
margin-top: 10px;
-webkit-animation-name: putar;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
}Untuk menjalankan hasil codingan cara membuat animasi gambar berputar menggunakan keyframe name di atas saya menggunakan browser chrome, oleh karena itu saya menggunakan Pengaturan –webkit- pada css nya temen temen bisa sesuaikan dengan browser masing masing. Lalu untuk memberikan efek berhenti ketika kita arahkan kursor ke objek ketikan script berkikut di css nya :
#gua:hover {
animation-play-state: paused;
background:#22A5D4;}Berfungsi untuk memberikan efek berhenti ketika kursor kita arahkan ke objek, Oke jika sudah save semua file dan jalankan pada browser masing masing. untuk lebih jelasnya silahkan teman – teman lihat Demo
Sekian artikel kali ini tentang cara membuat animasi gambar berputar menggunakan keyframe name semoga bermanfaat bagi semuanya nantikan artikel – artikel saya berikutnya.
The post Cara Membuat Animasi Gambar Berputar Menggunakan Keyframe Name appeared first on Kursus Website Terbaik.