Los problemas de CSS que encontré al trabajar en el terminal móvil
La mayoría de las dudas habituales sobre CSS están relacionadas con terminales móviles.
Reglas de formato simples: dos líneas en blanco entre las entradas y una línea en blanco para cada sección de contenido. Todos los signos de puntuación están en caracteres chinos. La puntuación de css está en inglés.
Si el número de entrada va seguido de letras en inglés, debe haber un espacio, como 4. css, hay un espacio entre "4 y "css".
1. Al crear una imagen de carrusel móvil, el ancho de la imagen del banner es el ancho de la pantalla del teléfono móvil. La imagen del carrusel agrega un botón de cambio hacia la izquierda y hacia la derecha. La posición del botón: absoluta; el elemento posicionado, el elemento posicionado excede Cuando se excede el contenedor principal (superando el 100%), aparecerá una barra de desplazamiento.
2. Hay 3 diseños disponibles en el terminal móvil.
1. Diseño de posicionamiento
Nota: La cabeza y la cola tienen un posicionamiento fijo. La parte del contenido del medio está absolutamente posicionada, overflow-y:auto;
2. Diseño flexible (lo recomiendo mucho)
Nota: La escritura aquí es concisa y no la hay. Mucha compatibilidad escrita. Es compatible con terminales móviles. El rendimiento es relativamente bueno y se puede utilizar con Android 5.1 y superior. Se utiliza la declaración flexible más nueva. (Este diseño es una copia del equipo de Shoudao).
3. Diseño de flujo ordinario
Nota: la cabeza y la cola todavía tienen una posición fija, pero la parte del contenido #content es Usar relleno -top y padding-bottom para soportar la página. Este diseño es bastante basura y causará varios problemas inexplicables de espacios en blanco en la parte superior e inferior de la página.
3. Atributos CSS
1. word-wrap:break-word; word-break:break-all permite que una línea de números consecutivos o letras en inglés se ajusten automáticamente cuando encontrar un límite.
2. -webkit-user-select:none | normal | texto Este atributo prohíbe a los usuarios seleccionar y copiar texto. También evita que el cuadro de entrada y el cuadro de selección obtengan foco, lo que hace imposible la entrada. o seleccione . Por lo tanto, cuando utilice este atributo, tenga cuidado de evitar la contaminación de la entrada y la selección.
3. Selector de atributos css3. li[class*='act'] puede seleccionar todos los elementos li con 'act' en la clase.
$('li').attr('class').indexOf('act'); Simplemente obtenga la clase del primer li y luego determine si existe 'act';
Se pueden realizar más operaciones a través del bucle for,
for(var i = 0; i < $("li[class*='act']").length; i++){
$("li[class*='act']")[i] .
}
4. Eliminar flotadores y resolver el colapso de altura.
a. Pseudo clase (copiando el enfoque de bootstrap)
.clearfix{}
.clearfix:after{ display:table:' '; ambos; }
b. El enfoque de Wang Ni
.box{ clear:both; overflow:hidden }
c. top al padre La situación de arrastrar hacia abajo
(Baidu dijo que es un estándar W3C, siempre que se destruya la estructura del padre y el hijo)
Escriba border-top en el padre, o escribir padding-top al padre. También puede utilizar el método b, pero el método a no es válido.
5. Unidad de altura y unidad de color CSS
height:calc (100vh - 200px); Tenga en cuenta que hay espacios a ambos lados del signo menos.
fondo:rgba (255, 255, 255, 0.5); valor de color rgb y transparencia de color.
6. Acerca de padding-top:100%; padding-left:100%;
Puedes usar estas dos propiedades para hacer un cuadrado absoluto. Por ejemplo, las fotos en WeChat Moments tienen una cuadrícula de 9 cuadrados, las fotos en QQ Space tienen una cuadrícula de 9 cuadrados y las fotos en Sina Weibo tienen una cuadrícula de 9 cuadrados. Se desconoce el ancho de la pantalla, hay 3 seguidas, cada ancho es 33,33333%, pero el alto no se puede escribir como porcentaje. Escriba otro div en cada elemento con un ancho de 33,3333%. El ancho predeterminado de este div es 33,33333% del padre. Luego use padding-top:100% para expandir la altura. ancho existente. Hay cálculo de ancho, padding-top: 100%; el valor px de padding-top es el mismo que el ancho. De esta manera, se crea un cuadrado en la posición: absoluta. : 100%; altura: 100%; Luego, colóquelo dentro de este div.
El espacio entre cada cuadrado se puede hacer con un borde transparente de 2px en el espacio QQ, o se puede hacer con relleno izquierdo y derecho y margen inferior como Sina Weibo. Cuando se trata de una imagen y cuatro imágenes, Sina escribe dos clases adicionales para hacerlo.
El espacio qq lo escribe el complemento js. El ancho máximo es 290 px y la altura se calcula en función del ancho máximo.
7. Línea de 0.5px
a. Encontré la línea delgada en el espacio qq, compatible con pantalla 2x y pantalla 3x
Solo pantalla @media y ( - webkit-min-device-pixel-ratio: 1,5), (resolución mínima: 120 ppp), (-ms-alto-contraste: activo), (-ms-alto-contraste: ninguno) {
.action.flex .menú desplegable .btn:después,.action.flex:después,.action.flex:antes,.feed .fuente:después,.min-comments .hr,.min-comments:nth-child ( 1): después de {
-webkit-transform:scaleY(.5);
-moz-transform: scaleY(.5);
- ms -transformar: escalaY(.5);
-o-transformar: escalaY(.5);
transformar: escalaY(.5)
}
.action.flex .menú desplegable .btn:después,.action.flex:antes,.min-comments:nth-child(1):después {
-webkit - origen-transformación: 100% 0;
-moz-origen-transformación: 100% 0;
-ms-origen-transformación: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0
}
.action.flex:después de la acción,. .flex>.btn:after,.feed .source:after {
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100% ;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100 %
}
}
Pantalla solo @media y (-webkit-device-pixel-ratio: 1.5) {
. action.flex .menú desplegable .btn:después,.action.flex:después,.action.flex:antes,.feed .fuente:después,.min-comments .hr,.min-comments:nth-child( 1 ):después de {
-webkit-transform:scaleY(.6666);
-moz-transform: scaleY(.6666);
-ms - transformar: escalaY(.6666);
-o-transformar: escalaY(.6666);
transformar: escalaY
(.6666)
}
}
Pantalla solo @media y (-webkit-device-pixel-ratio: 3) {
.action.flex .menú desplegable .btn:después,.action.flex:después,.action.flex:antes,.feed .fuente:después,.min-comments .hr,.min-comments:nth- niño(1):después {
-webkit-transform:scaleY(.33);
-moz-transform: scaleY(.33);
-ms-transform: escalaY(.33);
-o-transform: escalaY(.33);
transforma: escalaY(.33)
}
}
b. El enfoque de Weui es
.weui-cells:after {
content: " ";
p>posición: absoluta;
izquierda: 0;
abajo: 0;
derecha: 0;
altura: 1px;
borde inferior: 1px sólido #e5e5e5;
color: #e5e5e5;
-webkit-transform-origin: 0 100%;
origen-transformación: 0 100%;
-transformación-webkit: escalaY(0.5);
transformación: escalaY(0.5);
índice z: 2;
}
8. Tamaño de la imagen de fondo tamaño de fondo, etiqueta img ajuste de objeto, posición del objeto.
background-size:contain | cover | auto 90% | 50% auto;
Esto muestra la imagen como imagen de fondo,
ajuste de objeto:relleno | contiene | cubierta | ninguno | reducción de escala (similar al efecto de tamaño de fondo)
posición de objeto:centro;
Si estos dos atributos se usan juntos, el efecto de imagen del elemento img src puede ser el mismo que el de la imagen de fondo y no estará deformado debido al tamaño desproporcionado de la imagen. Sin embargo, la compatibilidad no es muy buena y actualmente sólo es apto para su uso en terminales móviles.
9. Evite que el teléfono muestre el menú predeterminado. Al presionar prolongadamente la etiqueta img o presionar prolongadamente la etiqueta a, aparecerá el menú predeterminado del sistema (en ios, no probado en Android).
-webkit-touch-callout:none;
10. Al escribir el alto de línea del texto, al centrar el texto verticalmente, también debes escribir el alto, line-height : 35px; height:35px;
Cuando usé appcan para crear una aplicación híbrida, descubrí que en Huawei meta8, ul li se usa para hacer una cuadrícula de nueve cuadrados. cada li tiene texto y la altura es li. Si la altura de la línea se estira, la altura de li sin texto y li con texto es diferente.
Algunas cuadrículas tienen texto y otras no. Como resultado, las nueve cuadrículas no están dispuestas en 3 filas. Algunas cuadrículas se cayeron y se organizaron en 4 filas. Por lo tanto, cuando se utiliza la altura de la línea para centrar el texto, se deben escribir tanto la altura como la altura de la línea.
11. text-align:justify;
Cuando hay un párrafo grande de texto en la etiqueta p, excepto la última línea, el resto del texto se alinea a la izquierda , lo que hace que el texto del párrafo sea significativamente mayor que la distancia a la derecha.
Puedes usar este atributo para no procesar la última fila para hacer este tipo de diseño:
El diseño anterior tiene un pequeño error, la última fila se deja en blanco, lo que aumenta el nivel principal. La razón es que los padres creen que todos los niños, incluidos los nodos de texto vacíos, ocupan espacio. Puede escribir font-size:0 en el ul principal para eliminar el espacio en blanco inferior y luego escribir font-size:14px; Sin embargo, text-align:justify; después de todo, trata con espacios (estirando espacios para dispersar los elementos internos horizontalmente), por lo que en HTML, si li se escribe continuamente o en secciones, los resultados de rendimiento son diferentes, por lo que esto es maravilloso. todavía ligeramente imperfecto e incluso inutilizable.
12. Elimina la barra de desplazamiento de -webkit-
#content::-webkit-scrollbar{ display: none }
Establece el estilo de la barra de desplazamiento<; /p> p>
/*Ancho de la barra de desplazamiento*/
#content::-webkit-scrollbar{ width:5px; }
/*Control deslizante de la barra de desplazamiento*/
#content::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.25); border-radius:3px }
/*El fondo completo; de la barra de desplazamiento */
#content::-webkit-scrollbar-track-piece{ background:#eee }
TGuide
/* barra de desplazamiento */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-button{display:none}
::- webkit-scrollbar-track{fondo-color:negro}
::-webkit-scrollbar-track-piece{fondo:#FFF}
::-webkit -scrollbar-thumb {color de fondo:#8E8E8E;border-radius:5px}
::-webkit-scrollbar-thumb:hover{color de fondo:#3B3B3B}
::-webkit -scrollbar-corner{fondo-color:#535353}
/*::-webkit-scrollbar-resizer{fondo-color:#FF6E00}*/
No hay selección delante El contenedor representa todos los elementos donde aparecen las barras de desplazamiento.
13. Establece el estilo del marcador de posición
input::-webkit-input-placeholder{ color:#999 }
input::-moz- input -placeholder{ color:#999; }
input:-ms-input-placeholder{ color:#999 }
Tenga en cuenta que -ms- está precedido por ": ".
14. Cuando el terminal móvil hace clic en una determinada línea: activa, agregue un color de fondo, como li:active{ background:#eee }, debe escribir ontouchstart en la etiqueta del cuerpo, de lo contrario, no tendrá ningún efecto.
Por otro lado, añadirlo al cuerpo puede evitar que la imagen se arrastre de forma predeterminada. El logo de Baidu se puede arrastrar.
15.Métodos pageshow() y pagehide().
Descripción del problema: la página A salta a la página B. Después de operar en la página B, regresa a la página A. El método ajax de la página A no se puede activar nuevamente. En appcan, regresar a la página A desde la página B cierra directamente la página B, mientras que en WeChat, se recupera del caché. Ninguno de estos puede volver a activar el ajax de la página A. Por ejemplo, cambie el nombre, cambie el género. Haga clic en ingresar desde la página A para saltar a la página B y realizar la modificación. Una vez completada la modificación, regrese a la página A y descubra que la información no se actualiza. En este momento, es necesario activarla activamente.
Solución: puede escuchar el método pageshow y usar el método addEventListener para escuchar. La condición de activación del método pageshow () es que se activa siempre que se muestre la página. Por ejemplo, la página B en appcan cubre la página A. Si la página B está cerrada, la página A se mostrará naturalmente. de la página A se activará; en WeChat, cuando hace clic en Volver, aunque la página se recupera del caché, también se activará el método pageshow. pagehide() es como su nombre indica.
16. Sobre la posición.
En Huawei meta7, versión de Android 4.4.2, los elementos position:relative; tienen un nivel más alto que los elementos position:absolute; El efecto de navegación de Baidu News también aprovecha esto. Muy extraño.
En esta estructura, i.line es absoluto y cada div es relativo. En Android 4.4.2, i.line quedará oculto por los divs hermanos del padre.
La solución es sacar i.line y ponerlo al mismo nivel que div.
17. background:url() centro sin repetición, url() centro sin repetición Puedes poner dos imágenes a la vez, separadas por comas;
18. Respecto al problema del teclado virtual del móvil que aparece y cubre la página.
La solución principal es utilizar document.activeElement.scrollIntoView(false); El parámetro false significa que el elemento activeElement está alineado con la parte inferior de la página, y verdadero significa que el elemento activeElement está alineado con la parte inferior de la página. parte superior de la página. Este método tiene buena compatibilidad.
Otro método es similar a document.activeElement.scrollIntoViewIfNeeded(); Este método no es muy efectivo ni tan útil como el anterior.
19. Diseño de columnas comúnmente utilizado en novelas y diseños de periódicos.
Cuatro de los cinco atributos comúnmente utilizados tienen efectos conocidos:
ancho de columna:; El ancho de cada columna.
column-gap:; El espacio entre columnas.
column-fill:; No sé para qué sirve.
column-rule:; La línea divisoria directa entre columnas, que tiene el mismo efecto que el atributo de borde.
column-count:; El número total de columnas. (Este atributo está limitado por el ancho de columna. Cuando el ancho de columna y el recuento de columnas se escriben al mismo tiempo, el ancho de columna tiene prioridad. Por ejemplo, el ancho total es 800 px, alto: 200 px; ancho de columna: 400 px; column-count: 4; Obviamente, 800px solo se puede dividir en 2 columnas como máximo, por lo que el ancho de columna se usa primero para el cálculo)
Pequeña compatibilidad: en ios, desplazamiento horizontal overflow-x:auto; Los contenedores no son adecuados para el diseño de columnas directo. Se debe anidar un div dentro del elemento overflow-x como contenedor para el diseño de columnas. De lo contrario, se producirá el extraño fenómeno de que la línea de columna y la regla de columna no sigan el desplazamiento del contenedor. Además, el espacio entre columnas no es adecuado para la asignación. El espacio entre columnas debe escribirse como 0. El espacio entre columnas se puede realizar utilizando el relleno izquierdo y derecho de los elementos secundarios del diseño de columnas.
Bloque grande de texto
.box{ width:300px; height:14em; overflow-x:auto } /*contenedor de desplazamiento*/
. col{ altura:11.9em; text-align:justify; column-count:2; column-gap:0; } /*Contenedor de columnas*/
.col > p{ padding:0 . line-height:1.2; } /*Contenedor para contenido de texto, agregue relleno izquierdo y derecho para aumentar el espacio entre columnas. */
4. Parece que muchas aplicaciones web escribirán dos metaetiquetas.
No estoy seguro de si admiten valores de color hexadecimales. (Parece que ha sido probado y el color hexadecimal no tiene ningún efecto. Tampoco tiene efecto en appcan.)
5. Generalmente, no se puede cargar la misma imagen
puede usar $('input[type= "file"]').wrap('').closest('form').get(0).reset(); Simplemente reinícielo.
6. Hay un error mágico en touchmove en Android. Baidu dijo que touchcancel se activará en el momento de touchmove en Android y todos los eventos táctiles se cancelarán. No existe tal problema en IOS.
La solución es: escribir e.preventDefault(); en touchmove. Pero en este caso, la página no se puede desplazar cuando se desliza el dedo. La página ya no se desplazará.
7. Diseño flexible
1. Versiones posteriores a 2012
Agregar display:-webkit-flex; display:flex;
El La dirección de disposición de los subelementos en la caja flexible se denomina eje principal, y la dirección perpendicular al eje principal se denomina eje transversal.
Los elementos secundarios dentro del cuadro flexible se pueden utilizar como elementos.
Nota: Después de configurarlo en flex, los atributos flotante, claro y de alineación vertical de sus elementos secundarios dejarán de ser válidos.
a. Seis propiedades que actúan sobre el padre: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content.
//Dirección de disposición de los elementos secundarios
flex-direction:row (valor predeterminado, de izquierda a derecha) | fila-reversa (de derecha a izquierda) columna (de arriba a abajo) ) | column-reverse (de abajo hacia arriba);
//¿Se ajustan los subelementos?
flex-wrap:nowrap (valor predeterminado, sin ajuste de línea) | (ajuste de línea) ) | wrap-reverse (ajuste, pero la primera línea está debajo);
//Abreviatura de la dirección de disposición de los subelementos y si los subelementos se ajustan o no
flex-flow:row nowrap;（ Valor predeterminado, de izquierda a derecha, sin ajuste de línea)
//Alineación de elementos (elementos secundarios) en el eje principal
justify-content:flex-start (valor predeterminado, comenzando desde el punto inicial) | flex-end (comenzando desde el punto final) | espacio entre (los dos primeros y últimos elementos están cerca del límite, y los elementos restantes están igualmente espaciados) | espacio alrededor (los dos elementos de cada elemento son El espaciado lateral es igual, lo que equivale a agregar margen a cada elemento, y los márgenes izquierdo y derecho son iguales);
//Los elementos (subelementos) están en el eje transversal
align-items:flex-start (comenzando desde el punto inicial) | flex-end (comenzando desde el punto final) | centro (centrado) | línea base (línea base con la primera línea de texto del elemento) Alineación) | estiramiento (valor predeterminado, llena el padre en la dirección del eje transversal);
//Alineación de varios ejes. Si solo hay un eje, este atributo no tiene ningún efecto.
align-content:flex-start (alineado con el punto inicial del eje transversal) | flex-end (alineado con el punto final del eje transversal) | eje) | espacio entre (Alineado con ambos extremos del eje transversal, el espacio entre los ejes se distribuye uniformemente) | espacio alrededor (el espacio en ambos lados de cada eje es igual. El espacio entre los ejes es dos veces mayor como espacio entre el eje y el borde, la primera fila y la última línea A no abrazarán el borde) | valor predeterminado, cubre todo el eje transversal);
(align-content: stretch). ; El primer eje está alineado con el borde y los otros ejes dividen equitativamente el espacio principal)
b. encoger, flexionar, flexionar, alinear-auto.
//El orden de los subelementos
//Artículo (sub . -element) ) relación de ampliación
flex-grow:0 (valor predeterminado, sin ampliación de forma predeterminada, aunque queda espacio) | /Relación de reducción de elementos
flex-shrink:1 (valor predeterminado, cuando no hay suficiente espacio, el elemento se reducirá) 0 (pase lo que pase, no se reducirá);
//El elemento ocupa el espacio del eje principal
flex-basis:auto (valor predeterminado, tamaño original del elemento) | valor fijo (200px, 50%, 100%...); p>
//flex- La abreviatura de grow, flex-shrink y flex-basis es flex: 0 1 auto
flex: 0 1 auto (valor predeterminado, si hay espacio adicional). , no se ampliará, pero si no hay suficiente espacio, se reducirá. El espacio ocupado por defecto es self size);
flex:auto => flex: 1 1 auto; ampliada o reducida según el tamaño del espacio.
(Hay un problema de compatibilidad. Chrome puede analizar flex: auto; -- flex: 1 1 auto; pero IE es divertido. IE10 analiza flex: auto -- flex: 1 0 auto; solo acerca, no aleja. IE11 El parsed flex: auto; como Chrome, se puede ampliar o reducir. Entonces, cuando use este atributo, escriba el valor completo, no la abreviatura)
flex:none; -- flex: 0 0. auto; acercar ni alejar.
//La alineación de un solo elemento que es diferente de otros elementos anulará los elementos de alineación del padre;
align-self:auto (valor predeterminado, hereda la alineación del padre - valor de elementos) | flex-start | flex-end | centro | línea de base | estiramiento, los demás son consistentes con el atributo de alineación de elementos principal.
Tenga cuidado al usar align-self: stretch; y align-items: stretch;
2. Versión 2009
La nueva versión es actualmente compatible. Bien, entonces la versión anterior se escribe directamente con el prefijo.
display:-webkit-box; display:-ms-flexbox;
Si el elemento secundario tiene display: en línea, el elemento secundario debe escribirse como display: block; innecesario.
a.5 atributos del padre. -webkit-box-pack, -webkit-box-align, -webkit-box-direction, -webkit-box-orient, -webkit-box-lines.
//Alineación de elementos en el eje principal
-webkit-box-pack:start (valor predeterminado, comienza desde el punto inicial) | fin | p>
//La alineación del proyecto en el eje transversal
-webkit-box-align:stretch (valor predeterminado, la dirección del eje transversal llena el centro principal) | baseline;
//El orden de los elementos
-webkit-box-direction:normal (valor predeterminado, comenzando desde el punto inicial) | inverso (comenzando desde el punto final);
//Dirección del eje principal
-webkit-box-orient:horizontal (valor predeterminado, dirección horizontal) | vertical (dirección vertical) (modo en línea, asignado a horizontal) | block-axis (Dispuesto en modo bloque, asignado a vertical);
//Artículo (si los subelementos se ajustan)
box-lines: single (valor predeterminado, no permitido) | múltiple (permitido) ;
Después de la prueba, este atributo no se puede utilizar sin la compatibilidad del navegador.
b.3 atributos de elementos secundarios. caja-flex, caja-flex-grupo, caja-ordinal-grupo.
//Si hacer zoom
-webkit-box-flex:0 (valor predeterminado, ni acercar ni alejar) 1 | p>
// El orden de los subelementos
-webkit-box-ordinal-group:1 | 2 | Organizar de pequeño a grande.
3. Resumen de 1 y 2.
La versión 2012 tiene principalmente dos atributos más que la versión 2009. Uno es si los subelementos se ajustan, flex-wrap. Las líneas de cuadro en 2009 no funcionan. Otro es la alineación de elementos secundarios en el eje principal. Justify-content:space-around de 2012 no tiene este efecto, pero se puede lograr agregando valores de relleno izquierdo y derecho.
Si desea ser compatible con la versión 2009 del diseño de cuadro y desea ajustar las líneas, solo puede utilizar el diseño flotante.
8. Problema de anidamiento de la estructura HTML
No anide elementos de bloque dentro de la etiqueta p. Otros elementos de bloque como h, p, dl... provocarán errores de análisis. Los elementos en línea se pueden anidar.
De manera similar, la etiqueta a no puede aparecer dentro de la etiqueta a, sin importar cuántos niveles de anidamiento sean necesarios.
El anidamiento de etiquetas HTML debe escribirse de acuerdo con las reglas de los elementos de bloque que contienen elementos en línea.
9. Etiquetas
Deje que el navegador utilice el kernel más reciente para renderizar.
10. Algunas características de la etiqueta de formulario
En el lado móvil, cuando el cuadro de entrada se enfoca, el navegador mostrará un teclado virtual Quiero la tecla Intro del. teclado virtual para cambiar a la búsqueda de palabras, la entrada debe escribirse de acuerdo con esta estructura:
Descripción: onsubmit='return false' evita que el formulario se envíe de forma predeterminada, lo que facilita el envío. usted para operar.
El tipo de entrada debe ser búsqueda.
Style='position: related;' se agrega a la entrada para evitar que la pantalla parpadee (pantalla blanca) al hacer clic en el botón de búsqueda en iOS.
11. Compatibilidad del navegador
1. Respecto al tema de configuración del ancho de la tabla.
Los métodos de análisis de Firefox y Chrome son diferentes. Chrome convertirá todos los anchos de tabla que escribas en px. Firefox no lo hace, por lo que al escribir anchos de estilo entre líneas en TD, el porcentaje y el px no se pueden mezclar. Deben estar unificados. Cada TD debe escribir el ancho del porcentaje o el ancho de px. td escribe px.
2. Algunos Android no reconocen height:calc(); en su lugar, puedes usar el diseño flexible.
12. Efecto de subtítulo de KTV
Método de implementación 1:
Escriba el texto dos veces y envuelva el mismo texto con dos elementos interlíneas.
Inicio
Inicio
o
Inicio
Inicio
El principio de implementación es: haga que el ancho de los dos tramos internos sea igual, establezca uno de ellos en ancho: 0% desbordamiento: oculto y luego use js para controlar dinámicamente el ancho de 0% a 100%.
Método de implementación 2: (Zhang Xinxu dijo que solo es aplicable a Chrome, pero lo probé y parece que también es posible para Firefox).
Principio de implementación: fondo- la imagen está superpuesta al fondo. En cuanto al color, Chrome tiene un atributo privado -webkit-background-clip:text que significa recorte de fondo, comenzando y terminando con texto; El efecto es que la imagen de fondo solo mostrará la ruta de escritura del texto y la imagen de fondo no se mostrará en otras partes del espacio excepto en el texto. Combinado con -webkit-text-fill-color:transparent;, el color de representación del texto se escribe como transparente, de modo que la ruta del texto revela la imagen de fondo. Luego cambie la posición horizontal de la imagen de fondo para revelar el texto y el color de fondo debajo de la imagen de fondo, logrando así el efecto de letra KTV.
Atributos CSS principales:
background-image:url(); /*Imagen de fondo de color sólido, utilizada para representar el color del texto, porque el texto es transparente.
*/
fondo-repetición:no-repetir;
-webkit-fondo-clip:texto;
-webkit-text-fill-color:transparente ;
background-position:0 0;
↑Simplemente cámbialo.
Ilustración del método de implementación 2: