Dalam artikel sebelumnya, kami membina komponen penarafan bintang CSS sahaja yang memanfaatkan topeng CSS, border-image , dan fungsi attr() yang dipertingkatkan. Kod yang dihasilkan menawarkan kebolehsuaian untuk mewujudkan variasi, seperti penilaian jantung dan kawalan kelantangan.

Susulan ini meneroka pendekatan yang lebih serba boleh menggunakan animasi yang didorong oleh tatal. Daripada kaedah border-image , kami akan memanfaatkan kuasa animasi berasaskan skrol.

Inilah komponen penarafan bintang yang sama, dilaksanakan dengan teknik baru ini. Oleh kerana sifat eksperimennya, tontonan optimum memerlukan Chrome 115 (Safari dan Sokongan Firefox yang belum selesai).

Perhatikan perbezaan utama: Warna bintang secara dinamik mencerminkan kiraan pemilihan-prestasi yang mustahil dengan kaedah border-image .

Untuk pemahaman yang lengkap, mengkaji artikel pertama sangat disyorkan, kerana bahagian ini membina konsep dan tekniknya.

Nota Penting: Pada masa penulisan, hanya Chrome 115 dan Edge 115 sepenuhnya menyokong ciri -ciri yang digunakan di sini. Sila gunakan salah satu penyemak imbas semasa mengikuti.

### Mengapa animasi yang didorong oleh tatal?

Penggunaan animasi yang didorong oleh tatal ke komponen penarafan bintang statik mungkin kelihatan tidak jelas. Penjelasan MDN untuk animasi yang didorong oleh tatal pada mulanya menambah kekeliruan:

Ia membolehkan anda menghidupkan nilai harta berdasarkan perkembangan sepanjang garis masa berasaskan skrol dan bukannya garis masa dokumen berasaskan masa lalai. Ini bermakna anda boleh menghidupkan elemen dengan menatal elemen yang boleh ditatal, bukan hanya dengan berlalunya masa.

Walau bagaimanapun, MDN menjelaskan bahawa dua jenis garis masa berasaskan skrol wujud: Tempoh Masa Kemajuan Tatal dan melihat garis masa kemajuan . Kami akan menggunakan yang terakhir:

Anda maju garis masa ini berdasarkan perubahan penglihatan elemen (dikenali sebagai subjek) di dalam Scroller. Keterlihatan subjek di dalam Scroller dijejaki sebagai peratusan kemajuan - secara lalai, garis masa adalah pada 0% apabila subjek terlebih dahulu dapat dilihat di satu tepi scroller, dan 100% apabila ia mencapai kelebihan.

CSS-Tricks Almanac menyediakan satu lagi definisi berguna mengenai view-timeline-name .

Konsep ini menjadi lebih jelas dengan mempertimbangkan elemen ibu jari sebagai subjek dan elemen input sebagai Scroller . Pergerakan ibu jari di dalam kawasan input mengubah penglihatannya, mewujudkan kemajuan berasaskan peratusan yang boleh kita gunakan untuk gaya input. Pada asasnya, kami mereplikasi document.querySelector("input").value dalam JavaScript, tetapi semata -mata dengan CSS!

Butiran pelaksanaan

Mari kita periksa kod:

 @Property --Val {
  Sintaks: "<number> ";
  Warisan: Benar;
  nilai awal: 0; 
}

input [type = "julat"] {
  --min: attr (jenis min (<number> ));
  --max: attr (jenis max (<number> ));

  Timeline-Scope: --val;
  Animasi: -Linear Linear kedua -duanya;
  Animasi-Timeline: --val;
  Animasi-Range: Entry 100% Exit 0%;
  Limpahan: Tersembunyi;
}

@keyframes --val {
  0% {--val: var (-max)}
  100% {--val: var (-min)}
}

input [type = "julat"] :: ibu jari {
  View-timeline:-Inlineval;
}</number></number></number>

Ini mungkin kelihatan rumit, tetapi kerosakan line-by-line memudahkannya.

Subjek dan Scroller

Kami mentakrifkan subjek (ibu jari) menggunakan view-timeline :

Propertinya CSS Shorthand view-timeline mendefinisikan garis masa kemajuan yang dinamakan, berkembang berdasarkan perubahan penglihatan elemen (subjek) dalam elemen scrollable (scroller). view-timeline ditetapkan pada subjek.

Nama garis masa adalah --val , dan paksi adalah inline (mendatar).

Seterusnya, kami menentukan Scroller (input) dengan overflow: hidden (atau overflow: auto ). Secara kritis, jangan lupa overflow pada Scroller! Tanpa itu, penyemak imbas akan mentakrifkan Scroller, yang berpotensi membawa kepada hasil yang tidak dijangka.

Animasi

Animasi mengubah pembolehubah --val antara nilai min dan max input, menggunakan fungsi attr() yang dipertingkatkan. Animasi ini dikaitkan dengan garis masa paparan menggunakan animation-timeline . Peraturan @property mendaftarkan pembolehubah untuk animasi.

timeline-scope juga penting. Dinamakan garis masa biasanya dilancarkan ke elemen dan keturunannya. Oleh kerana input adalah ibu bapa ibu jari, kami meluaskan skop menggunakan timeline-scope .

Nilai kerangka utama terbalik ( min pada 100%, max pada 0%) kerana animasi bermula apabila ibu jari berada di sebelah kanan (nilai maksimum) dan berakhir di sebelah kiri (nilai min). Ini mencerminkan tingkah laku elemen menatal mendatar di mana subjek muncul dari kanan dan hilang ke kiri.

Julat Animasi

animation-range: entry 100% exit 0%; sangat penting. Secara lalai, animasi bermula apabila subjek memasuki Scroller dari kanan dan berakhir apabila ia keluar dari kiri. Oleh kerana ibu jari tidak melimpah, kami menyesuaikan julat supaya animasi bermula apabila ibu jari berada di dalam Scroller dan berakhir apabila ia mula pergi.

Penggunaan berulang --val merujuk kepada pemboleh ubah animasi, garis masa pandangan yang dinamakan, dan kerangka utama, semuanya berkongsi nama yang sama untuk kejelasan. Menggunakan nama yang berbeza akan meningkatkan kebolehbacaan.

Komponen penarafan bintang

Kerja teras melibatkan mendapatkan nilai input. Baki kod yang tersisa komponen, menarik dari artikel pertama:

 input [type = "julat"] {
  Latar Belakang: 
    Linear-Gradient (90deg,
      hsl (calc (30 4 * var (-val)) 100% 56%) calc (var (-val) * 100% / var (-max)),
      #7B7B7B 0
    );
}
input [type = "julat"] :: ibu jari {
  Kelegapan: 0;
}

Jempol tersembunyi, dan warna kecerunan bintang -bintang berdasarkan pembolehubah --val . Warna kecerunan juga berubah secara dinamik menggunakan hsl() .

Demo lengkap (Chrome 115 disyorkan) mempamerkan fungsi, termasuk sokongan separuh bintang dengan menyesuaikan atribut input.

Imej sempadan vs animasi yang didorong oleh tatal

Di luar keserasian pelayar, pendekatan animasi yang didorong oleh tatal melepasi kaedah border-image . Walaupun border-image lebih mudah, ia tidak mempunyai fleksibiliti. Animasi yang didorong oleh tatal memberikan kawalan yang lebih besar, kerana nilai input diperoleh dan kemudian digunakan untuk gaya. Teknik nilai-nilai ini boleh digunakan semula walaupun tanpa gaya input langsung.

Contoh -contoh yang mempamerkan tooltips dan pelbagai slider pelbagai yang mengawal unsur -unsur halaman yang berbeza menunjukkan kepelbagaian pendekatan ini. Malah gelangsar pelbagai bergelombang menggambarkan kemungkinan gaya yang luas.

Kesimpulan

Siri dua bahagian ini menunjukkan komponen penarafan bintang minimum semasa meneroka attr() , topeng CSS, dan animasi yang didorong oleh tatal. Walaupun sokongan penyemak imbas mengehadkan penggunaan pengeluaran segera, meneroka ciri -ciri ini memberikan pandangan yang berharga ke dalam keupayaan CSS masa depan.

Siri artikel

1. Komponen penarafan bintang CSS sahaja dan banyak lagi! (Bahagian 1)
2. Komponen penarafan bintang CSS sahaja dan banyak lagi! (Bahagian 2)

Atas ialah kandungan terperinci Komponen penarafan bintang CSS sahaja dan banyak lagi! (Bahagian 2). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!