Cara Membuat Tombol Berkedip

Daftar Isi:

Cara Membuat Tombol Berkedip
Cara Membuat Tombol Berkedip

Video: Cara Membuat Tombol Berkedip

Video: Cara Membuat Tombol Berkedip
Video: My Tutorial 1 (Cara Membuat Tombol Berkedip) 2024, November
Anonim

Tombol berkedip adalah elemen desain web yang membantu membuat halaman menjadi cerah dan menarik. Namun, saat menggunakan efek ini, Anda perlu memikirkan kenyamanan pengguna: jangan menyalahgunakan "keripik" yang beriak.

Cara membuat tombol berkedip
Cara membuat tombol berkedip

instruksi

Langkah 1

Jika tombol yang diperlukan, direpresentasikan sebagai gambar tautan dan berubah warna setelah mengarahkan kursor, buatlah menggunakan tabel dan atribut onMouseOver dan onMouseOut.

Tombol

Langkah 2

Anda dapat membuat tombol berkedip menggunakan JavaScript. Untuk membuat efek berlaku pada mouse hover dan memudar setelah kursor dihapus, gunakan kode berikut: Judul tab arrColor = ["0", "1", "2", "3", "4", "5 ", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; function mouseOut() {for (i = 0; i <13; i ++) setTimeout ('document.blinkbutton.button.style.background = "#' + arrColor [15-i] + '0' + arrColor [15 -i] + 'FFF ";', i * 50); } function mouseOver () {for (i = 0; i <15; i ++) setTimeout ('document.blinkbutton.button.style.background = "#' + arrColor + '0' + arrColor + ' F31 "; ', i * 50); }

Langkah 3

Jika Anda memiliki Adobe Photoshop, Anda dapat membuat efek berkedip langsung di editor grafis. Untuk melakukan ini, buat file baru, serta lapisan baru, yang jumlahnya harus sama dengan jumlah bingkai. Setelah itu, di panel kanan, pilih layer pertama dengan "mata" dan buka item "Animasi" dari menu "Jendela". Pada panel yang muncul, klik tombol duplikat bingkai, pindahkan "mata" ke lapisan berikutnya, dan seterusnya. Klik kanan pada setiap frame dan atur waktunya. Pratinjau hasilnya, ubah jika perlu dan simpan dalam format

Direkomendasikan: