Menggunakan JS dalam desain web dapat mencapai banyak efek khusus halaman, tetapi banyak orang mengabaikan efek kuat dari tag meta dalam tag HTML. Bahkan, tag meta juga dapat mencapai banyak efek transisi halaman yang indah.
Tag meta adalah tag tambahan di area kepala bahasa HTML. Tag meta ditempatkan pada <head> ... </head> dari setiap halaman web.
Di tengah, kami lebih akrab dengan:
<meta name = generator konten = Microsoft FrontPage 3.0> // Instruksi untuk mengedit alat;
<meta name = Kata kunci konten = ...> // Kata kunci penjelasan;
<meta name = deskripsi konten = ...> // Jelaskan deskripsi beranda;
Ini memberikan informasi yang tidak terlihat oleh pengguna. Tag meta biasanya digunakan untuk menentukan topik halaman untuk robot mesin pencari, atau untuk menentukan cookie di browser pengguna; Mereka dapat digunakan untuk mengidentifikasi penulis, mengatur format halaman, ringkasan konten label dan kata kunci; Mereka juga dapat mengatur halaman untuk memungkinkannya.
Segarkan diri Anda sesuai dengan interval waktu yang Anda definisikan, atur level konten RASC, dll.
Artikel ini terutama menjelaskan cara menggunakan tag meta untuk menghasilkan efek transisi halaman ...
penggunaan:
<Meta http-equiv = konten page-enter = blendtrans (durasi = 0,5)>
<Meta http-equiv = konten halaman-exit = blendtrans (durasi = 0,5)>
Blendtrans adalah jenis filter dinamis CSS yang menghasilkan efek memudar. Filter Dinamis lainnya Pengungkapan Transtrans juga dapat digunakan untuk Efek Entri dan Keluar Halaman:
Filter dinamis dapat menambahkan efek konversi pudar dan gambar bergerak ke halaman. Mereka dapat dibagi menjadi dua jenis campuran (campuran) dan mengungkapkan (tampilan).
Yang pertama secara bertahap dapat menghilang atau muncul, sedangkan yang terakhir memberikan 24 efek konversi gambar ...
<Meta http-equiv = konten page-enter = ungkapantrans (durasi = x, transisi = y)>
<Meta http-equiv = konten halaman-exit = pengungkapan (durasi = x, transisi = y)>
Durasi: Menunjukkan durasi efek filter (unit: detik)
Transisi: Jenis filter. Menunjukkan efek khusus mana yang digunakan, nilainya 0-23.
------------------------------------------------------------------------------
0: Kecekalan persegi panjang 1: Perluasan persegi panjang
2: Pengurangan Lingkaran 3: Ekspansi Lingkaran
4: Segarkan ke atas ke atas 5: Segarkan ke bawah
6: Segarkan ke kiri ke kanan 7: Segarkan kanan ke kiri
8: Tirai Vertikal 9: Tirai Horizontal
10: Tirai horizontal yang dipindahkan 11: Tirai vertikal yang dipindahkan
12: Titik difusi 13: Segarkan kiri dan kanan ke tengah
14: Segarkan dari tengah ke kiri dan kanan 15: Segarkan dari tengah ke atas dan bawah
16: naik dan turun ke tengah 17: turun dan kanan ke kiri atas
18: kanan atas ke kiri bawah 19: kiri atas ke kanan bawah
20: kiri bawah ke kanan atas 21: Bilah horizontal
22: Bilah Vertikal 23: Pilih salah satu dari 22 di atas secara acak
------------------------------------------------------------------------------
Selama efek transformasi halaman web dicocokkan dengan benar, efek transformasi ini akan meninggalkan kesan yang sangat dalam pada pengunjung, bahkan mereka yang tidak tertarik dengan situs Anda. Khusus untuk teman -teman yang suka belajar produksi halaman web, mereka dapat menyalin halaman web Anda untuk dipelajari dan diteliti. Bahkan, Anda baru saja menambahkan sepotong kode pendek^ _^ Efek transformasi halaman web (trans) dibagi menjadi empat kategori: memasuki halaman web (halaman-enter), meninggalkan halaman web (halaman-exit), memasuki situs (enter-site-enter), dan meninggalkan situs (exit situs). Setiap kategori utama dibagi menjadi 25 subkategori. Pertama, gunakan efek memasuki halaman web untuk menggambarkan:
Efek saat memasuki halaman web
1. Kode efek campuran adalah sebagai berikut: <meta http-equiv = konten page-enter = blendtrans (durasi = 1.0)>
2. Kode efek penyusutan berbentuk kotak adalah sebagai berikut: <meta http-equiv = konten Page-enter = ungkapantrans (durasi = 1.0, transisi = 0)>
3. Kode efek radiasi berbentuk kotak adalah sebagai berikut: <meta http-equiv = konten masuk halaman = pengungkapantrans (durasi = 1.0, transisi = 1)>
4. Kode efek penyusutan melingkar adalah sebagai berikut: <meta http-equiv = konten masuk halaman = pengungkapantrans (durasi = 1.0, transisi = 2)>
5. Kode efek radiasi sirkular adalah sebagai berikut: <meta http-equiv = konten masuk halaman = pengungkapan (durasi = 1.0, transisi = 3)>
6. Kode efek penghapusan ke atas adalah sebagai berikut: <meta http-equiv = konten masuk halaman = pengungkapan (durasi = 1.0, transisi = 4)>
7. Kode efek penghapusan ke bawah adalah sebagai berikut: <meta http-equiv = konten masuk halaman = pengungkapan (durasi = 1.0, transisi = 4)>
8. Kode untuk menghapus hak untuk efek adalah sebagai berikut: <meta http-equiv = konten Page-Enter = pengungkapantrans (durasi = 1.0, transisi = 6)>>
9. Kode efek penghapus kiri adalah sebagai berikut: <meta http-equiv = konten masuk halaman = pengungkapan (durasi = 1.0, transisi = 7)>
10. Kode efek masking vertikal adalah sebagai berikut: <meta http-equiv = konten page-enter = pengungkapan (durasi = 1.0, transisi = 8)>
11. Kode efek masking horizontal adalah sebagai berikut: <meta http-equiv = konten page-enter = pengungkapantrans (durasi = 1.0, transisi = 9)>
12. Kode efek catur horizontal adalah sebagai berikut: <meta http-equiv = konten page-enter = pengungkapantrans (durasi = 1.0, transisi = 10)>
13. Kode efek papan vertikal adalah sebagai berikut: <meta http-equiv = konten masuk halaman = pengungkapan (durasi = 1.0, transisi = 11)>
14. Kode efek dekomposisi adalah sebagai berikut: <meta http-equiv = konten page-enter = pengungkapan (durasi = 1.0, transisi = 12)>
15. Kode efek indentasi kiri dan kanan ke pusat adalah sebagai berikut: <meta http-equiv = konten masuk halaman = pengungkapan (durasi = 1.0, transisi = 13)>
16. Kode efek pusat ke ekspansi kiri dan kanan adalah sebagai berikut: <meta http-equiv = konten masuk halaman = pengungkapan (durasi = 1.0, transisi = 14)>
17. Kode efek indentasi naik dan turun adalah sebagai berikut: <meta http-equiv = konten page-enter = ungkapantrans (durasi = 1.0, transisi = 16)>
18. Kode efek pusat ke atas dan ke bawah adalah sebagai berikut: <meta http-equiv = konten page-enter = ungkapantrans (durasi = 1.0, transisi = 17)>
19. Ekstrak kode efek dari kiri bawah sebagai berikut: <meta http-equiv = konten masuk halaman = pengungkapan (durasi = 1.0, transisi = 18)>
20. Ekstrak kode efek dari kiri atas sebagai berikut: <meta http-equiv = konten masuk halaman = pengungkapan (durasi = 1.0, transisi = 19)>
dua puluh satu. Ekstrak kode efek dari kanan bawah sebagai berikut: <meta http-equiv = konten page-enter = ungkapantrans (durasi = 1.0, transisi = 20)>
dua puluh dua. Ekstrak kode efek dari kanan atas sebagai berikut: <meta http-equiv = konten page-enter = ungkapantrans (durasi = 1.0, transisi = 21)>
dua puluh tiga. Kode efek dari garis horizontal acak adalah sebagai berikut: <meta http-equiv = konten page-enter = ungkapantrans (durasi = 1.0, transisi = 22)>
Dua Puluh Empat. Kode efek dari garis vertikal acak adalah sebagai berikut: <meta http-equiv = konten page-enter = ungkapantrans (durasi = 1.0, transisi = 22)>
25. Kode efek acak adalah sebagai berikut: <meta http-equiv = konten masuk halaman = pengungkapan (durasi = 1.0, transisi = 23)>
Sekarang mari kita analisis kode -kode ini. Pertama -tama, Anda pasti akan melihat bahwa sebagian besar kode ini sangat mirip. Faktanya, meskipun ada banyak kategori, 25 sub-kategori dalam setiap kategori utama sesuai dengan yang sama dan diidentifikasi oleh angka (kecuali untuk blendtrans efek campuran (durasi = 1.0)), sehingga tidak perlu memberikan contoh kepada non-kategori. Cukup ganti halaman-masuk dengan halaman-exit (tinggalkan halaman web), entri situs (tinggalkan situs), dan exit situs (tinggalkan situs), dan Anda dapat mencapai efek yang diinginkan, dan juga lebih nyaman untuk diingat. Di mana durasi = 1.0 dapat mengatur berapa lama waktu untuk setiap siklus, unit ini detik (sekarang diatur adalah 1 detik per siklus). Perlu dicatat bahwa efek dari empat kategori utama dapat ditetapkan secara bersamaan pada halaman web, tetapi setiap kategori utama hanya dapat menetapkan satu efek. Selain itu, jika halaman web adalah halaman bingkai, efeknya tidak akan ditampilkan.