El uso de JS en el diseño web puede lograr muchos efectos especiales de página, pero muchas personas ignoran los poderosos efectos de las metaetiquetas en las etiquetas HTML. De hecho, las metaetiquetas también pueden lograr muchos hermosos efectos de transición de páginas.
La metaetiqueta es una etiqueta auxiliar en el área de cabezal de idioma HTML. La metaetiqueta se coloca en la <vero> ... </head> de cada página web.
En el medio, estamos más familiarizados con:
<meta name = generador content = Microsoft FrontPage 3.0> // Instrucciones para editar herramientas;
<meta name = Keywords content = ...> // explicación de palabras clave;
<meta name = descripción content = ...> // Describe la descripción de la página de inicio;
Proporciona información que no es visible para el usuario. Las metaetiquetas generalmente se usan para definir temas de página para robots del motor de búsqueda, o para definir cookies en el navegador del usuario; Se pueden usar para identificar autores, establecer formatos de página, un resumen de contenido de etiqueta y palabras clave; También pueden establecer páginas para hacerlas posibles.
Actualice de acuerdo con el intervalo de tiempo que define, establezca el nivel de contenido de RASC, etc.
Este artículo explica principalmente cómo usar metaetiquetas para generar efectos de transición de página ...
uso:
<Meta http-oquiv = page-enter content = blendtrans (duración = 0.5)>
<Meta http-oquiv = page-exit content = blendtrans (duración = 0.5)>
Blendtrans es un tipo de filtro dinámico CSS que produce un efecto de desvanecimiento. Otro filtro dinámico revelatrans también se puede usar para los efectos de entrada y salida de la página:
Los filtros dinámicos pueden agregar efectos de conversión de desvanecimiento e imagen en movimiento a la página. Se pueden dividir en dos tipos de mezcla (mezcla) y revelar (pantalla).
El primero puede desaparecer o aparecer gradualmente, mientras que el segundo proporciona 24 efectos de conversión de imagen ...
<Meta http-oquiv = page-enter content = reveltrans (duración = x, transición = y)>
<Meta http-oquiv = page-exit content = reveltrans (duración = x, transición = y)>
Duración: indica la duración del efecto del filtro (unidad: segundos)
Transición: tipo de filtro. Indica qué efecto especial se usa, el valor es 0-23.
------------------------------------------------------------------------------
0: Rectángulo encogimiento 1: expandir el rectángulo
2: Reducción del círculo 3: expansión del círculo
4: Actualice hasta la parte superior 5: Actualice hasta la parte inferior
6: Actualizar de izquierda a derecha 7: Actualizar de derecha a izquierda
8: persianas verticales 9: persianas horizontales
10: persianas horizontales desplazadas 11: persianas verticales desplazadas
12: Punto Difusión 13: Actualice de izquierda y derecha a media
14: Actualizar de medio a izquierda y derecha 15: Actualice de medio a la parte superior e inferior
16: arriba y abajo hasta el medio 17: hacia abajo y hacia la derecha hasta la parte superior izquierda
18: Arriba de la derecha a la parte inferior izquierda 19: superior izquierda a abajo derecha
20: Bajo izquierdo a la parte superior derecha 21: barra horizontal
22: Barra vertical 23: Elija uno de los 22 anteriores al azar
------------------------------------------------------------------------------
Mientras los efectos de transformación de la página web coincidan correctamente, estos efectos de transformación dejarán una impresión muy profunda en los visitantes, incluso aquellos que no están interesados en su sitio. Especialmente para los amigos que les gusta aprender la producción de la página web, pueden copiar su página web para estudiar e investigar. De hecho, acaba de agregar una breve pieza de código^ _^ El efecto de transformación de la página web (trans) se divide en cuatro categorías: ingresar a la página web (entrada de página), salir de la página web (ejecución de la página), ingresar al sitio (ingreso del sitio) y salir del sitio (sitio-eexit). Cada categoría principal se divide en 25 subcategorías. Primero, use el efecto de ingresar a la página web para ilustrar:
Efectos al ingresar a una página web
1. El código de efecto mixto es el siguiente: <meta http-oquiv = page-enter content = blendtrans (duración = 1.0)>
2. El código de efecto de contracción en forma de cuadro es el siguiente: <meta http-outiv = page-enter content = reveltrans (duración = 1.0, transición = 0)>
3. El código del efecto de efecto de radiación en forma de caja es el siguiente: <meta http-outiv = page-enter content = reveltrans (duración = 1.0, transición = 1)>
4. El código de efecto de contracción circular es el siguiente: <meta http-outiv = page-enter content = reveltrans (duración = 1.0, transición = 2)>
5. El código de efecto de radiación circular es el siguiente: <meta http-outiv = page-enter content = reveltrans (duración = 1.0, transición = 3)>
6. El código de efecto de borrado ascendente es el siguiente: <meta http-outiv = page-enter content = reveltrans (duración = 1.0, transición = 4)>
7. El código de efecto de borrado hacia abajo es el siguiente: <meta http-outiv = page-enter content = revelatrans (duración = 1.0, transición = 4)>
8. El código para borrar el derecho al efecto es el siguiente: <meta http-oquiv = page-entr content = revelatrans (duración = 1.0, transición = 6)>
9. El código de efecto de borrado izquierdo es el siguiente: <meta http-oquiv = page-enter content = revelatrans (duración = 1.0, transición = 7)>
10. El código de efecto de enmascaramiento vertical es el siguiente: <meta http-outiv = page-enter content = reveltrans (duración = 1.0, transición = 8)>
11. El código de efecto de enmascaramiento horizontal es el siguiente: <meta http-outiv = page-entr content = revelatrans (duración = 1.0, transición = 9)>
12. El código de efecto de tablero de ajedrez horizontal es el siguiente: <meta http-oquiv = page-entr content = revelatrans (duración = 1.0, transición = 10)>
13. El código de efecto de la placa vertical es el siguiente: <meta http-oquiv = page-enter content = revelatrans (duración = 1.0, transición = 11)>
14. El código de efecto de descomposición es el siguiente: <meta http-oquiv = page-enter content = revelatrans (duración = 1.0, transición = 12)>
15. El código de efecto de la sangría izquierda y derecha al centro es el siguiente: <meta http-oquiv = page-enter content = revelatrans (duración = 1.0, transición = 13)>
16. El código de efecto del centro a la expansión izquierda y derecha es el siguiente: <meta http-oquiv = page-enter content = reveltrans (duración = 1.0, transición = 14)>
17. El código de efecto de sangría ascendente es el siguiente: <meta http-outiv = page-entr content = revelatrans (duración = 1.0, transición = 16)>
18. El código de efecto del centro hacia arriba y hacia abajo es el siguiente: <meta http-oquiv = page-entr content = revelatrans (duración = 1.0, transición = 17)>
19. Extraiga el código de efecto desde la parte inferior izquierda de la siguiente manera: <meta http-outiv = page-enter content = reveltrans (duración = 1.0, transición = 18)>
20. Extraiga el código de efecto desde la parte superior izquierda de la siguiente manera: <meta http-outiv = page-enter content = reveltrans (duración = 1.0, transición = 19)>
veintiuno. Extraiga el código de efecto desde la parte inferior de la derecha de la siguiente manera: <meta http-oquiv = page-enter content = reveltrans (duración = 1.0, transición = 20)>
Veintidós. Extraiga el código de efecto desde la parte superior derecha de la siguiente manera: <meta http-oquiv = page-enter content = reveltrans (duración = 1.0, transición = 21)>
veintitrés. El código de efecto de la línea horizontal aleatoria es el siguiente: <meta http-outiv = page-enter content = reveltrans (duración = 1.0, transición = 22)>
Veinticuatro. El código de efecto de la línea vertical aleatoria es el siguiente: <meta http-outiv = page-enter content = reveltrans (duración = 1.0, transición = 22)>
25. El código de efecto aleatorio es el siguiente: <meta http-outiv = page-entr content = revelatrans (duración = 1.0, transición = 23)>
Ahora analicemos estos códigos. En primer lugar, definitivamente verá que la mayoría de estos códigos son muy similares. De hecho, aunque existen muchas categorías, las 25 subcategorías en cada categoría principal corresponden a la misma y se identifican por números (excepto por las Blendtrans de efecto mixto (duración = 1.0)), por lo que no hay necesidad de dar ejemplos a las no categorías. Simplemente reemplace la entrada de página con Page-Exit (salga de la página web), Site-Ingres (salga del sitio) y Site-Exit (salga del sitio), y puede lograr el efecto deseado, y también es más conveniente recordar. Donde la duración = 1.0 puede establecer cuánto tiempo es el tiempo para cada ciclo, la unidad es segundos (ahora establecido es 1 segundo por ciclo). Cabe señalar que los efectos de las cuatro categorías principales se pueden establecer al mismo tiempo en una página web, pero cada categoría principal solo puede establecer un efecto. Además, si la página web es una página de cuadro, el efecto no se mostrará.