Cipta Kesan Butang Menarik Mata dengan Animasi Cahaya Berputar

Pernah terfikir bagaimana tapak web mencipta butang yang menarik perhatian dengan kesan bercahaya dan berputar? Kesan ini boleh memikat hati pengguna dan meningkatkan UI/UX tapak web anda. Mari terokai cara membinanya langkah demi langkah dengan CSS dan sedikit JavaScript.

Langkah 1: Buat Susun Atur Butang

Mari kita buat butang mudah pada mulanya-

<button>WHY CHOOSE US</button>

button {
  width: 250px;
  height: 80px;
  border-radius: 3rem;
  outline: none;
  background: black;
  border: 2px solid transparent;
  color: white;
  cursor: pointer;
}

/* ... Other styles ... */

Ia akan kelihatan seperti ini-

Langkah 2: Menambah Kesan Gradien

Sekarang, mari kita bincangkan tentang jenis kecerunan istimewa yang dipanggil kecerunan kon. Pernahkah anda mendengarnya? Walaupun kecerunan linear mengalihkan warna dengan lancar di sepanjang garis lurus dan kecerunan jejarian menggabungkan warna ke luar dari pusat bulatan, kecerunan kon mengalihkan warna di sekeliling titik pusat, membentuk corak bulat atau seperti kon. Ini adalah cara unik untuk mencipta reka bentuk yang dinamik dan menarik secara visual.

Lihat perbezaan di bawah-

Kami akan menggunakan kecerunan kon untuk kesan ini. Mari tambahkan itu pada butang kami-

  background: conic-gradient(from 0, transparent, white 10%, transparent 20%)
    border-box;

Coretan CSS melibatkan kecerunan kon dan menggunakan kotak sempadan untuk saiz latar belakang. Berikut ialah pecahan perkara yang berlaku:

Pecahan Kecerunan Kon

kecerunan kon(daripada 0, lutsinar, putih 10%, lutsinar 20%):

dari 0: Kecerunan bermula pada sudut 0 darjah (bahagian atas bulatan) dan berjalan mengikut arah jam.

lutsinar: Kecerunan bermula dengan warna lutsinar sepenuhnya.

putih 10%: Pada 10% daripada jumlah lilitan kecerunan, warna bertukar kepada putih.

lutsinar 20%: Pada 20% daripada lilitan kecerunan, ia bertukar kembali kepada lutsinar.

Corak ini menghasilkan "kepingan" putih yang dikelilingi oleh ketelusan.

kotak sempadan

kotak sempadan: Kecerunan digunakan pada kawasan yang merangkumi kandungan, pelapik dan sempadan elemen. Ini bermakna kecerunan akan meliputi keseluruhan kotak elemen, sehingga ke tepi luar sempadan.

Selepas menggunakan kesan ini, butang akan kelihatan seperti ini-

Kini, kami akan menggunakan kecerunan kon ini sebagai sempadan kecerunan butang kami. Bagaimana kita boleh melakukannya?

Kami akan menggunakan kuasa saiz kotak di sini. Kami akan membuat berbilang latar belakang untuk butang ini. Latar belakang atas butang akan menjadi latar belakang pepejal yang akan mempunyai kotak padding sebagai saiz kotak yang bermaksud bahawa ia tidak akan meregang sehingga sempadan. Lihat kod di bawah-

<button>WHY CHOOSE US</button>

Jadi, kini kami mempunyai latar belakang hitam yang meliputi butang, termasuk kandungan dan paddingnya. Kecerunan kon yang kami tambahkan sebelum ini terbentang sehingga ke sempadan. Memandangkan sempadan adalah lutsinar, kita dapat melihat ketebalan 2px kecerunan kon ditunjukkan melalui sempadan. Sekarang, butangnya kelihatan seperti ini-

Langkah 3: Menghidupkan Gradien

Kami telah menambahkan kesan cahaya berkilat itu pada butang kami! Sekarang, mari buat ia bergerak. Untuk melakukan ini, kami memerlukan sedikit JavaScript. Tetapi pertama-tama, kami akan mengemas kini CSS untuk menjadikannya lebih fleksibel dan dinamik.

button {
  width: 250px;
  height: 80px;
  border-radius: 3rem;
  outline: none;
  background: black;
  border: 2px solid transparent;
  color: white;
  cursor: pointer;
}

/* ... Other styles ... */

Di sini, satu-satunya perbezaan daripada bahagian sebelumnya ialah, kami telah memperkenalkan pembolehubah CSS yang dipanggil --angle. [dari var(--angle, 0) bermakna jika nilai --angle tidak ditakrifkan, nilai lalai akan menjadi 0 yang sama seperti sebelumnya.] Dan, sekarang kita akan menukar nilai ---angle ini daripada 0 kepada 360 oleh Javascript. Akibatnya, kecerunan kon akan bergerak dari 0 hingga 360 darjah dan menjadikan kesan berputar bercahaya itu. Mari lihat bahagian JavaScript sekarang-

  background: conic-gradient(from 0, transparent, white 10%, transparent 20%)
    border-box;

Pengendalian yang sangat mudah. Selepas kandungan DOM dimuatkan, kami memanggil fungsi yang dipanggil rotate(). Fungsi ini menambah sudut sebanyak 1 pada setiap lelaran dan menetapkan nilai itu kepada pembolehubah CSS butang --angle. Itu akhirnya mengubah tempat kecerunan kon. Kami memanggil fungsi ini secara berulang menggunakan fungsi terbina dalam yang dipanggil requestAnimationFrame. Ini ialah fungsi Javascript khas seperti setInterval atau setTimeOut. Mari kita perincikan sedikit fungsi requestAnimationFrame ini-

Apa Fungsinya:
Memastikan animasi lancar: Ia menyegerakkan animasi anda dengan kadar segar semula skrin (biasanya 60 bingkai sesaat) supaya ia tidak kelihatan berombak.

Menjimatkan kuasa: Ia menjeda animasi apabila pengguna beralih ke tab lain, menjimatkan sumber.

Panggil fungsi anda pada masa yang sesuai: Ia memberitahu logik animasi anda apabila tiba masanya untuk mengemas kini, jadi semuanya kekal segerak.

Cara Ia Berfungsi:
Anda memberikan requestAnimationFrame fungsi untuk dipanggil (biasanya logik animasi anda). Ia menjalankan fungsi ini sejurus sebelum penyemak imbas melukis bingkai seterusnya pada skrin.

Dan, kami mendapat keputusan akhir. Lihat Codepen di bawah untuk mendapatkan perubahan langkah demi langkah-

Kini anda telah mencipta butang bercahaya dan berputar menggunakan CSS dan JavaScript! Jangan ragu untuk mengubah suai kecerunan, kelajuan animasi (Ada idea bagaimana kami boleh melakukannya? Tinggalkan dalam ulasan.), atau tambahkan kesan tersuai anda sendiri. Teknik ini ialah cara yang bagus untuk menonjolkan UI anda.

Mahukan lebih banyak idea untuk animasi Javascript kreatif atau kesan butang CSS? Beritahu saya dalam ulasan, dan nantikan catatan blog seterusnya!

Anda juga boleh mencari saya di sini-

X
LinkedIn

Atas ialah kandungan terperinci Cipta Kesan Butang Menarik Mata dengan Animasi Cahaya Berputar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!