Rutinas CSS comunes que escribí (reimpresas)
1. Animación intercalada
A veces necesitamos agregar la misma animación a varios elementos después de reproducirla, no es difícil encontrar que se moverán juntos y finalmente terminarán juntos. que se verá muy soso. Entonces, ¿cómo haces que tu animación sea un poco más interesante? Es sencillo, como todos empiezan a moverse al mismo tiempo, puedes hacer que se detengan en el mismo momento. ¿Cómo hacer para que no se muevan al mismo tiempo? Tenga en cuenta que las animaciones CSS tienen una propiedad diferida. Por ejemplo, si hay diez elementos reproduciendo diez animaciones, establezca el tiempo de animación del segundo elemento en 0,5 segundos más tarde que el del primer elemento (es decir, establezca el retraso en 0,5 segundos), y así sucesivamente para otros elementos, de modo que Aparecerán escalonados para formar un efecto visual único.
Esto se llama animación escalonada: al establecer diferentes retrasos, la animación quedará escalonada.
Esta demostración se puede encontrar en: https://codepen.io/alphardex/pen/XWWWBmQ
Esta demostración se puede encontrar en: https://codepen.io/alphardex /full/KKwvKGY
Normalmente, comenzamos a intercalar desde el primer elemento. Pero si queremos intercalar comenzando desde el elemento del medio, tenemos que agregar un valor a cada retraso del elemento actual, cuyo valor es el producto de la distancia entre el índice del elemento del medio y el índice del elemento actual (es decir, el índice del elemento del medio El valor absoluto de la diferencia entre el subíndice del elemento actual), retraso + Math.abs(i - medio) * paso, donde el subíndice del elemento del medio, medio = letras.filtro(e = > e ! == " ").length / 2
Esta demostración está disponible en: https://codepen.io/alphardex/full/eYYMYXJ
Esta demostración está disponible en : https:// codepen.io/alphardex /full/dyPorwJ
El estado de los elementos HTML puede cambiar dinámicamente. Por ejemplo, cuando el mouse está sobre un botón, el botón cambiará al estado "desplazado" y podemos usar la pseudoclase :hover para seleccionar el botón en ese estado y cambiar su estilo. La pseudoclase :hover es una de las pseudoclases más utilizadas por los autores. Otra pseudoclase comúnmente utilizada es :nth-child, que se utiliza para seleccionar elementos secundarios de un elemento. También se utilizan hasta cierto punto otras pseudoclases como :focus, :focus-within, etc.
Esta demostración está en https://codepen.io/alphardex/pen/pooYKVa
¿Quién dice que los botones solo pueden tener un conjunto de bordes? Usando posicionamiento absoluto y relleno podemos crear 3 bordes de diferentes tamaños para el botón, lo cual es mucho más atractivo.
La demostración se puede encontrar aquí: https://codepen.io/alphardex/full/ZEYXomW
En resumen, un pseudoelemento es un elemento que inserta elementos adicionales que no se tratan como marcas HTML, manteniendo así limpia la estructura HTML. Sabemos que cada elemento tiene pseudoelementos ::before y ::after, lo que significa que cada elemento proporciona tres rectángulos (uno para el elemento en sí y dos para los pseudoelementos) para dibujar formas. Ahora, con la propiedad clip-path, puedes dibujar casi cualquier forma, dependiendo de tu imaginación. La animación en la imagen de arriba es una animación de barra a través del texto. La barra es un pseudo elemento correspondiente a cada párrafo de texto. La aplicación de animación a cada párrafo de texto y sus pseudo elementos puede lograr el mismo efecto que la imagen de arriba.
Esta demostración está disponible en: https://codepen.io/alphardex/pen/jOEOEzZ
Los elementos pueden tener valores de atributos personalizados, que generalmente se denominan data-*``attr () y asignar a sus pseudoelementos.
La función Attr() se utiliza para obtener el valor del atributo personalizado del elemento y asignarlo al contenido del pseudoelemento como su contenido generado. Usando esta función, podemos usar pseudoelementos para "copiar" otro fragmento de texto basado en el texto original, como se muestra en la imagen a continuación.
Esta demostración está disponible en: https://codepen.io/alphardex/full/wvBeXjd
Previamente hemos logrado este efecto usando el efecto del botón de parpadeo: cuando el mouse Al pasar el mouse Sobre el botón, las luces se cruzan de izquierda a derecha. Utilizo un degradado para simular esa luz y la traduzco hacia la derecha mediante transformación: traducirX().
Pero esto es obviamente incorrecto: ¿por qué es visible la luz? ¿No debería estar "ocluido"? Entonces, al agregar overflow: hide al botón, la luz se ocultará cuando esté fuera del botón.
Este es el poder del engaño :)
Esta demostración se encuentra en https://codepen.io/alphardex/pen/eYYzXBZ
Para más engaños , por favor mira esta demostración, solo por esta vez XD
Consejo: Es una buena idea hacer que la entrada sea secundaria de la etiqueta, de modo que cuando el usuario haga clic en la etiqueta, se pase a la entrada. ¿Qué pasa si la entrada predeterminada es demasiado fea? Luego bórrelo usando apariencia: ninguna u opacidad: 0. Luego, use el selector de hermanos ~ para personalizar todos los elementos adyacentes a la entrada (el signo "+" también funciona, pero solo selecciona el elemento más cercano), por ejemplo, puede usar pseudoelementos para generar un nuevo cuadro para reemplazar la entrada original. box y use pseudo-class:checked y animación para representarlo. verificación y animación para representar su estado seleccionado, esto es esencialmente un truco
Algunas características de CSS se pueden usar para mejorar su trabajo
Esto incluye transición y transformación Se utilizan animaciones CSS CSS es el La herramienta más poderosa para diseñar efectos geniales, la uso en casi todos mis trabajos
Alguien me preguntó, ¿por qué se me ocurren tantas animaciones? fuerte> Alguien me preguntó, ¿por qué se me ocurren tantas animaciones? He leído cientos de animaciones y conozco todas las técnicas de animación comunes por dentro y por fuera. Lo mismo ocurre con los sitios web interesantes que pueden brindarte mucha inspiración para tus diseños si miras de cerca. En pocas palabras: sólo apreciando más la animación se puede escribir una buena animación.
Agregar esquinas redondeadas a un cuadro se usa generalmente para embellecer componentes como botones. Si lo configura al 50%, se redondeará, lo cual también es muy común
Ajustes por. Al configurar el radio del borde de múltiples vértices, puede crear bordes de arco irregulares
Esta demostración se encuentra en: https://codepen.io/alphardex/full/abbWOPR
Para un cuadro Agregar una sombra puede aumentar la tridimensionalidad del cuadro y se puede hacer en varias capas. También puede suavizar la sombra.
Si el radio de expansión de la sombra del cuadro se establece en un valor lo suficientemente grande, Puedes usar esto para oscurecer el fondo sin la necesidad de un elemento div adicional.
Ten en cuenta que la sombra del cuadro también tiene una funcionalidad incorporada que se puede usar para iluminar el interior del cuadro. Usando esta función, podemos establecer el color dentro de un rango dentro del cuadro para formar una forma de media luna
La demostración está aquí: https://codepen.io/alphardex/full/ eYmGEGp
Text-shadow es básicamente lo mismo que box-shadow, pero relacionado con el texto. Generalmente se usa para texto brillante, pero también se puede superponer para crear texto de neón, pseudotexto 3D, etc.
Esta demostración se puede encontrar en: https://codepen.io/alphardex/full/Exxodoq
Esta demostración se puede encontrar en: https://codepen.io/alphardex /full/rNNwmZz
Esta demostración se puede encontrar en: https://codepen.io/alphardex/full/QWWavvx
Recorta el fondo a la función de color de primer plano del texto, de uso frecuente junto con color: transparent para generar texto degradado
Esta demostración está disponible en: https://codepen.io/alphardex/full/QWwveZG
El degradado se puede utilizar como fondo imágenes, con fuertes efectos de color e incluso se puede usar para simular luz
Como puedes ver, esta demostración utiliza etiquetas de diálogo HTML, fondos degradados, animaciones y máscaras de desbordamiento.
Esta demostración se encuentra en: https://codepen.io/alphardex/full/eYYxzBm
El gradiente radial se usa generalmente para generar un fondo circular, el fondo de Nieve en el El ejemplo anterior es un gradiente radial elíptico. Además, como el fondo se puede apilar, podemos superponerlo. Además, dado que el fondo es apilable, podemos apilar múltiples gradientes radiales de diferentes tamaños en diferentes ubicaciones para crear grupos de puntos, que luego se pueden animar para crear un efecto de partículas sin la necesidad de elementos div redundantes.
La demostración se puede ver aquí: https://codepen.io/alphardex/full/OJPvMGx
Apile un pseudoelemento encima del gráfico circular y establezca el contenido en un valor (que se calcula a partir de una variable CSS) para crear el efecto de un medidor. Al medir el efecto, la vista gorda vuelve a entrar en juego.
La demo la puedes encontrar en: https://codepen.io/alphardex/full/BaydVvQ
Filtros PD, si has jugado con ellos, el desenfoque es el más común
La demostración se puede encontrar en: https://codepen.io/alphardex/full/BaydVvQ
Estos son los filtros más comunes en PS. strong> https://codepen.io/alphardex/full/pooQMVp
El modo de mezcla en PS se usa a menudo para efectos especiales del fondo del texto. El modo de filtro (imagen) se usa para lograr el enmascaramiento del video. efecto del texto
Esta dirección de demostración: https://codepen.io/alphardex/full/wvvLYpV
Esta dirección de demostración: https://codepen.io/alphardex/full/ ZEEBRrq
Esta dirección de demostración: https://codepen.io/alphardex/full/ExaZgxp
Aunque esta no es una función de CSS, a menudo se usa para lograr funciones que no pueden se puede lograr con CSS, entonces, ¿qué pasa con su uso? Se usa naturalmente cuando hay propiedades en las animaciones CSS que no se pueden obtener de CSS
Actualmente, CSS no tiene una API para obtener la posición del mouse, así que consideré usar JS para obtener la posición del mouse. Al observar la API DOM relevante, descubrí que puedo usar la API para escuchar los eventos del mouse y obtener la posición actual del mouse usando e.clientX y e.clientY. Ahora que podemos obtener la posición del mouse, podemos usar e.clientX y e.clientY para obtener la posición actual del mouse.
Dado que se puede obtener la posición del mouse, no es difícil rastrear la posición del mouse: escuche los eventos mouseenter y mouseleave para obtener la posición cuando el mouse ingresa o sale del elemento, y use esta coordenada como la distancia de desplazamiento del mouse; el evento mousemove para obtener el movimiento del mouse a la posición del elemento cuando el mouse está encendido, y use esta coordenada como la distancia de desplazamiento del mouse.
Cuando el mouse se mueve a un elemento, escucharemos el evento de movimiento del mouse para obtener la posición del mouse y usaremos esta coordenada como la distancia de desplazamiento del mouse para lograr el efecto de seguimiento del mouse.
La demo se puede encontrar en: https://codepen.io/alphardex/full/OJPmQGz
CSS Houdini es la API subyacente de CSS, que nos permite utilizar este conjunto de interfaces Ampliar la funcionalidad de CSS. Actualmente, no podemos animar degradados directamente porque el navegador no comprende el tipo de valor que está cambiando. En este momento, podemos usar CSS.registerProperty() para registrar la variable personalizada y declarar su sintaxis como tipo de color
Esta demostración está disponible en: https://codepen.io/alphardex/full/RwNxpXQ
Un menú discreto estilo Braveheart que intercala animaciones con pseudoclases y pseudoelementos. se combinan entre sí.
La URL de esta demostración es: https://codepen.io/alphardex/full/ExavZdV