Ketika datang ke "warna bertahap", apa yang Anda pikirkan?
Ketika saya mulai mencari kata benda ini, saya menemukan bahwa ia sebenarnya memiliki dua atau dua bentuk: gradien dinamis dan gradien statis.
Gradien dinamis yang disebut, untuk memberikan contoh sederhana: ketika dia datang, wajahnya secara bertahap berubah merah ... secara bertahap, perubahan secara bertahap terus berubah; Sementara gradien statis bahkan lebih sederhana: ketika pelangi berasal dari langit, merah, oranye, kuning, hijau, biru, biru, ungu ... dalam produk jadi yang saat ini ditampilkan, warna dari bagian ke yang lain berbeda, dan amplitudo mungkin relatif kecil, dan mereka secara bertahap berubah, tetapi satu hal sangat penting. Sudah ada, membentuk status yang berubah dan tidak dapat diubah lagi.
Dengan cara ini, mari kita gunakan JavaScript terlebih dahulu untuk mengimplementasikan apa yang disebut gradien dinamis. Jika Anda mempertimbangkan alasan dinamis, Anda tidak akan naik gambar. Izinkan saya memperkenalkan ide secara singkat:
* Gradien dinamis
Salinan kode adalah sebagai berikut:
<span style = "font-size: 12px;"> <html>
...
<body>
<senter>
<Div id = "fade"> </div>
</penter>
</body>
</html> </span>
Demi kenyamanan menonton, saya menulis gaya tertanam, atau merekomendasikan menggunakan gaya tautan eksternal. Selanjutnya, saya hanya akan menulis secara dinamis untuk mencapai efek gradien:
Salinan kode adalah sebagai berikut:
<span style = "font-size: 12px;"> <script type = "text/javascript">
var node = document.getElementById ("fade");
var color = "#0000";
level var = 1;
window.load = function fading () {
node.style.background = warna.+level.toString ()+level.toString ();
level ++;
if (level> 16) {
ClearTimeout (fading);
}kalau tidak{
setTimeout (fading, 300);
}
}
<script> </span>
Tampaknya saya tidak perlu mengatakan lebih banyak, hanya splicing dan panggilan berulang.
* Gradien statis
Pertama -tama mari kita lampirkan gambar, mari kita lihat efeknya dan umumnya memahami arti para dewa.
Tanpa mempertimbangkan kompatibilitas, um, itu kompatibel setelah penelitian modifikasi nyata. Ini agak kurang dalam antarmuka tanpa mempertimbangkan kompatibilitas. Oke, mari kita terus katakan ini dulu. Saya menggunakan kernel webkit, jadi saya akan menggunakan ini untuk memperkenalkannya terlebih dahulu.
Tambahkan dalam gaya CSS:
Latar Belakang: -webkit-gradient (linear, 100% 0%, 0% 0%, dari (#FFFFFFF), color-stop (0,5,#0000FF), ke (#FFFFFFF));
Penjelasan singkat:
Linear: Ini bertemu dua konsep gradien linier dan gradien radial, yang tidak lebih dari perubahan linier pada garis dan radial menyebar di sekitar seperti lingkaran;
Empat nilai berikut: masing -masing mewakili nilai px dalam arah yang sesuai, yang dapat dihafal dalam urutan rotasi searah jarum jam dari kiri, tetapi mewakili, warna yang terputus.
Dari: Ini adalah warna awal
ke: dan dari muncul pada saat yang sama, dan warna pada akhir gradien akhirnya selesai
Color-stop: Mengacu pada warna apa yang akan muncul ketika berubah ke tempat garis berada. Tentu saja, transisi dari daerah sekitarnya, yang setara dengan dari, ke titik transisi, dari titik transisi, ke;
Oke, saya akan sangat mengerti, dan saya akan mendapatkan beberapa kode dasar sederhana lainnya
Salinan kode adalah sebagai berikut:
Filter: progid: dximagetransform.microsoft.gradient (gradientType = 1, startColorStr =#b8c4cb, endcolorStr =#f6f6f8);/*ie6*/
Latar Belakang: -Moz-linear-gradient (kiri,#ffffff,#ff0000);/*Lainnya bukan IE6*/
latar belakang: -webkit-gradient (linear, 100% 0%, 0% 0%, dari (#ff0000), ke (#0000ff));/*lainnya bukan yaitu Ie6*/
Saya menonton episode "berbicara" hari ini. Ternyata ada pertunjukan yang bagus. Apakah terlalu rendah?