Membuatnya pun cukup mudah, hasilnya pun akan memberikan nilai plus untuk website kita, karena ini termasuk elemen yang bisa membuat orang betah berlama-lama di website anda sambil menikmati animasi tersebut.
Untuk membuatnya kita sebenarnya hanya membutuhkan keterampilan menggunakan css, karena diperlukan sedikit pengetahuan tentang beberapa fungsi yang ada di css3, seperti box-shadow, animation, transform, border-radius.
Penerapannya bisa dimana saja, namun biasanya di header karena awan letaknya diatas, banyaknya awan bisa disesuaikan dengan kebutuhan website dan dibuat menyatu dengan website yang ada, bentuk awan pun bisa disesuaikan dengan kebutuhan,oke langsung saja ya :D ..
-Pertama, buat file dengan nama "henlatoz.css" :D ..kode :
KODE:
-Kedua, buat file dengan nama "index.html" (atau apapun :D) ..kode :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animasi Awan</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="henlatoz.css">
</head>
<body>
<div id="langit">
<div class="awan no1"></div>
<div class="awan no2"></div>
<div class="awan no3"></div>
<div class="awan no4"></div>
<div class="awan no5"></div>
<div class="bulan"></div>
<h1>LygaCool<small> <a href="http://lygacool.blogspot.com/">Blog</a></small></h1>
</div>
<div class="main">
<p>LygaCool adalah tempatnya untuk bersenang-senang dimana anda dapat mengumpulkan sejumlah script,dll :D</p>
<p>Btw,ini adalah demo untuk animasi awan bergerak dengan css yang keren keren keren dan keren :D</p>
<br>
<p><a href="http://lygacool.blogspot.com/">Kembali</a></p>
</div>
</body>
</html>
=============SELESAI :D ,cara gunanaya tinggal agan upload ke server aja :D ..lalu test dah :D ===
===================================================
Btw,untuk demonya = KLIK DISINI
No comments:
Post a Comment
Menjadi Donatur untuk blog ini hanya dengan 1 klik iklan.