Efek animasi dan gradiasi sering dipakai untuk pemrograman game. Efek gradiasi dapat diterapkan dalam animasi button atau tombol tanpa coding yang panjang. Dibawah ini contoh pembuatan event button atau tombol dengan memberikan animasi dan gradiasi, Style yang digunakan menggunakan background dan hover dengan menampilkan sebuah menu.
<html>
<head>
<style>
#menu {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#999999), to(cyan));
position: relative;
width: 70px;
display: inline-block;
padding: 20px;
-webkit-transition: top 3s linier;
font-family: 'Arial';
font-weight: bold;
}
#menu:hover {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#999999), to(green));
}
</style>
</head>
<body>
<div id="menu">Home</div>
<div id="menu">About</div>
<div id="menu">Services</div>
</body>
</html>
Pada menu pertama membuat sebuah warna latar gradiasi dengan cara memanggil web-gradient. Tipe gradiasinya linear dari 0 sampai dengan 100% dan warnanya dari #999999 sampai cyan. Dan pada menu kedua menentukan event ketika menu didekati oleh mouse maka ubah warna gradiasi dari #99999 sampai green.
Hasilnya:
.
terima kasih infonya gan
ReplyDeletesama-sama.
ReplyDelete