Mencampurkan warna dalam css tulen

Merah dan biru sama dengan ungu ... kan?

Bagaimana untuk menyatakan ini dalam CSS? Tidak mudah. Walaupun terdapat cadangan draf untuk fungsi campuran warna dan Chrome juga menunjukkan minat, nampaknya tidak betul di hadapan anda. Mempunyai pencampuran warna CSS asli akan menjadi hebat kerana ia memberikan lebih banyak fleksibiliti apabila pereka bekerja pada warna. Sebagai contoh, variasi nada warna asas boleh dibuat untuk membentuk palet reka bentuk.

Tetapi ini adalah trik CSS, jadi mari kita lakukan beberapa helah CSS.

Kami mempunyai fungsi Calc () dalam CSS untuk memanipulasi nombor . Walau bagaimanapun, terdapat sedikit cara untuk memanipulasi warna secara langsung, walaupun beberapa format warna seperti HSL () dan RGB () adalah berangka.

Campurkan warna dengan animasi

Kita boleh menggunakan CSS untuk beralih antara satu warna dan yang lain. Ini berfungsi:

 div {
  Latar Belakang: Biru;
  Peralihan: 0.2s;
}
div: hover {
  Latar Belakang: Merah;
}

Berikut adalah contoh menggunakan animasi:

 div {
  Latar Belakang: Biru;
  Peralihan: 0.2s;
}
div: hover {
  Animasi: perubahan warna 0.2s ke hadapan;
}

@KeyFrames Change-Color {
  ke {
    Latar Belakang: Merah;
  }
}

Ini adalah animasi kerangka utama yang tidak terhingga di mana anda dapat melihat warna bergerak antara merah dan biru. Buka konsol dan klik pada halaman - walaupun JavaScript boleh memberitahu anda warna semasa pada mana -mana titik yang tepat dalam animasi.

Jadi, bagaimana jika kita berhenti di tengah -tengah animasi? Warna pencampuran warna! Ini adalah animasi yang dijeda dengan tempoh 0.5 saat selama 1 saat, jadi hanya separuh jalan:

Kami melakukan ini dengan menetapkan animasi -kelewatan -0.5s. Apakah warna separuh antara merah dan biru? Ungu. Kita boleh menyesuaikan animasi-delay untuk menentukan peratusan kedua-dua warna.

Ini berfungsi dengan pelayar kernel Chromium dan Firefox. Di Safari, anda mesti menukar nama animasi untuk memaksa penyemak imbas untuk mengira semula kemajuan animasi.

Trik ini juga boleh digunakan untuk menambah saluran alfa ke warna, yang sering berguna untuk reka bentuk tema.

Tambahkan warna dicampur ke sifat tersuai CSS

Setakat ini ini adalah helah pintar, tetapi tidak praktikal untuk memohon animasi ke mana -mana elemen yang anda perlukan untuk menggunakan warna campuran dan kemudian harus menetapkan semua sifat yang anda ingin tukar di @Keyframes.

Jika kita menambah beberapa ciri CSS, kita dapat memperbaiki ini:

1. Gunakan sifat adat CSS jenis @property supaya mereka dapat dicipta sebagai warna yang sesuai supaya mereka dapat animasi sebagai warna.
2. Gunakan SASS @fungsi untuk memanggil kerangka kunci dengan mudah pada titik tertentu.

Sekarang kita masih perlu memanggil animasi, tetapi hasilnya ialah kita boleh menggunakan sifat tersuai untuk sebarang sifat lain.

Atas ialah kandungan terperinci Mencampurkan warna dalam css tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!