Antes, al menos 5 personas me preguntaban en los comentarios cómo se logra la animación de subrayado ondulado al vincular el cursor en el artículo, similar al siguiente gif:
He aquí cómo lograrlo.
Hay dos métodos de implementación, cada uno con sus ventajas y desventajas.
1. Utilice CSS puro para lograr un degradado radial
Es dibujar nuestro efecto de línea ondulada usando un degradado radial Un segmento de bucle de línea ondulada es una combinación de medio arco mirando hacia arriba y medio arco mirando hacia abajo.
Por lo tanto, solo necesitamos dibujar arcos usando gradientes radiales, y luego background-positioncontrolando las posiciones de los dos arcos y uniéndolos antes y después, se puede lograr el efecto de línea de onda.
El código CSS relevante es el siguiente:
.flow-wave {
background: radial-gradient (círculo a 10px -7px, transparente 8px, currentColor 8px, currentColor 9px, transparente 9px) repeat-x,
radial-gradient (círculo a 10px 27px, transparente 8px, currentColor 8px, currentColor 9px , transparente 9px) repetir-x;
tamaño de fondo: 20px 20px;
posición de fondo: -10px calc (100% + 16px), 0 calc (100% - 4px);
}
Los efectos en tiempo real son los siguientes:
Con el efecto de línea ondulada estática, el resto es como esta línea ondulada en movimiento, y puede usar la animationanimación CSS3 para controlar la background-positionposición.
.flow-wave {
animación: waveFlow 1s infinito lineal;
}
@keyframes waveFlow {
from {background-position-x: -10px, 0; }
a {background-position-x: -30px, -20px; }
}
Entonces se realiza el efecto de animación de ondas.
Puede hacer clic aquí: demostración de línea de onda de simulación de gradiente radial CSS
La ventaja de este método es que el control de color es muy conveniente. Por ejemplo, cambiamos el color del texto para perdonar verde, y el color de la onda de agua curva también se vuelve verde perdón:
La desventaja de este método es que el costo de comprensión es un poco alto. Cómo usar CSS para radial-gradientsimular el efecto de línea de onda requiere una acumulación considerable de habilidades de CSS. No es fácil comenzar y no es fácil de mantener si lo necesita para modificar un tamaño en el futuro. Al mismo tiempo, en el navegador Chrome con una pantalla de densidad de pantalla normal, las líneas no son suaves, lo que puede no ser aceptable para los diseñadores defectuosos.
En este punto, puede probar el siguiente método que es más propicio para la comprensión.
2. Utilice el diagrama vectorial de forma de onda SVG como fondo
Es decir, usamos directamente un diagrama vectorial de forma de onda SVG como fondo, en lugar de dibujar CSS manualmente por nosotros mismos, la cantidad de código es similar y es más fácil de entender. Sugerencia de código CSS:
.svg-wave {
background: url ("data: image / svg + xml,% 3Csvg xmlns = 'http: //www.w3.org/2000/svg' viewBox = '0 0 20 4'% 3E% 3Cpath fill = 'ninguna' carrera = '% 23333' d = 'M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3' /% 3E% 3C / svg% 3E ") repetir- x 0100%;
tamaño de fondo: 20px automático;
}
Los efectos en tiempo real son los siguientes:
Con el efecto de línea ondulada estática, el resto es como esta línea ondulada en movimiento, y puede usar la animationanimación CSS3 para controlar la background-positionposición.
.svg-wave {
animación: waveMove 1s infinito lineal;
}
@keyframes waveMove {
from {background-position: 0 100%; }
a {background-position: -20px 100%; }
}
Este método es el método utilizado por el enlace de mi blog.
La ventaja es que los bordes de las líneas son suaves, el efecto es delicado, fácil de entender, fácil de usar y fácil de mantener.
La desventaja también es obvia, es decir, el color de la línea ondulada no puede cambiar en tiempo real con el color del texto, lo cual es adecuado para escenas donde el color del texto no cambia.
Si queremos cambiar el color de la línea ondulada también es muy sencillo, modificar esta parte del backgroundcódigo stroke='%23333', '%23'es decir #, lo que stroke='%23333'realmente stroke='#333'significa. Por ejemplo, necesitamos cambiarlo a rojo y ligeramente naranja, stroke='%23F30'y se puede escribir por completo stroke='%23FF3300'.
Este color es el color de la línea ondulada del enlace de mi blog, como se muestra a continuación:
Puede elegir el método apropiado de acuerdo con su escenario de desarrollo real.
3. Siempre que esté a punto de terminar
text-decorationLas propiedades ya admiten el subrayado de tilde:
estilo de decoración de texto: ondulado;
El efecto es el siguiente:
Se puede ver que la línea es tan gruesa e inconsistente, y cuando los caracteres y la línea decorativa se superponen, la línea decorativa desaparece directamente y la línea ondulada se convierte en una sección, lo que requiere text-decoration-skipun control adicional. Por lo tanto, para el desarrollo real, no se recomienda usarlo en proyectos reales.
Actualización sobre 2020-03-21
text-decorationTambién es posible darse cuenta de las líneas onduladas que se pueden utilizar en proyectos reales por propiedades. Puedes consultar este artículo mío: " La decoración de texto CSS logra un efecto de línea ondulada de 100% de ancho ".
Debido a que el ancho de la línea ondulada es diferente en diferentes navegadores, no podemos predecir el ancho de cada segmento repetido de la línea ondulada y, en teoría, no es factible querer un movimiento infinito.
Por lo tanto, no se puede utilizar el efecto de animación de línea de onda de texto o gráficos text-decoration.
PD: La decoración de texto agrega no solo líneas onduladas, sino también líneas de puntos, etc. Si está interesado, consulte el artículo que escribí anteriormente sobre " Comprender las nuevas características como las líneas onduladas de decoración de texto CSS3 ".
Por último, escribe un poema:
Siempre que está por terminar,
siempre quiero hablar de algo.
¿De dónde viene la adicción?
Hay una isla a lo lejos.