Visité el sitio del blog - shoptalkshow hoy , y fue muy interesante ver tal interfaz:
Creo que su estilo es muy singular, especialmente algunos de los bordes.
Oye, aquí hay un borde especial para ver qué trucos se pueden hacer en el borde usando CSS.
propiedad fronteriza
Cuando se trata de bordes, lo primero que me viene a la mente es borderque el más utilizado es ,, solidque dashedaparece en la imagen de arriba dashed.
Además de los más comunes solid, dashedtambién apoya la frontera CSS none, hidden, dotted, double, groove, ridge, inset, outsety otros estilos. Retire none, hiddeny vistazo a todos los estilos de borde que están soportados de forma nativa:
Eso es todo por lo básico.Si desea implementar un borde de otros estilos, o agregar animación al borde, necesita cooperar con algunos otros atributos o tener un gran cerebro. Bien, echemos un vistazo a algunos bordes interesantes adicionales.
Cambio de longitud de cuadro
Comencemos con uno relativamente simple, para lograr un efecto de borde similar a este:
En realidad, hay dos pseudoelementos tomados del elemento. Se proporcionan dos elementos ficticios solo en el borde izquierdo, inferior, borde derecho, hovercambiando el aspecto a dos elementos ficticios. Muy facil de entender.
div {
position: relative;
border: 1px solid #03A9F3;
&::before,
&::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
}
&::before {
top: -5px;
left: -5px;
border-top: 1px solid var(--borderColor);
border-left: 1px solid var(--borderColor);
}
&::after {
right: -5px;
bottom: -5px;
border-bottom: 1px solid var(--borderColor);
border-right: 1px solid var(--borderColor);
}
&:hover::before,
&:hover::after {
width: calc(100% + 9px);
height: calc(100% + 9px);
}
}
复制代码Demostración de CodePen: animación de borde ancho
A continuación, algunas dificultades comenzarán a profundizarse.
Animación de borde punteado
Use dashedpalabras clave, puede crear fácilmente un borde de puntos.
div {
border: 1px dashed #333;
}
复制代码
Por supuesto, nuestro objetivo es hacer que el marco se mueva. Usar dashedla palabra clave no es posible. Sin embargo, hay muchas formas de implementar líneas discontinuas en CSS. Por ejemplo, los degradados son una buena forma:
div {
background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
background-size: 4px 1px;
background-position: 0 0;
}
复制代码Eche un vistazo, la línea discontinua simulada con un degradado es la siguiente:
De acuerdo, los degradados admiten varios degradados. Podemos usar degradados para representar los 4 lados del contenedor:
div {
background:
linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
background-position: 0 0, 0 100%, 0 0, 100% 0;
}
复制代码El efecto es el siguiente:
De acuerdo, hasta ahora, nuestra animación de borde punteado está completada en más de la mitad. Aunque border-style: dashedno es compatible con la animación, es compatible con el degradado. Le damos lo anterior más un hoverefecto div , hoveragregamos una animationanimación de tiempo , los elementos de cambio background-positionpueden ser.
div:hover {
animation: linearGradientMove .3s infinite linear;
}
@keyframes linearGradientMove {
100% {
background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
}
}
复制代码OK, mira el efecto, cuando el cursor sube, el borde se puede mover , porque toda la animación está conectada de un extremo a otro, la animación de bucle infinito parece que el borde punteado se mueve todo el tiempo, este es un pequeño truco a ciegas o truco:
Aquí hay otro pequeño truco, si queremos que la animación del borde punteado pase de otros bordes al borde punteado, y luego procedamos con la animación. El gradiente también es completamente posible de simular, si desea guardar algún código, bordersea más rápido, como este:
div {
border: 1px solid #333;
&:hover {
border: none;
background:
linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
background-position: 0 0, 0 100%, 0 0, 100% 0;
}
}
复制代码Debido a la diferencia en la posición del borde y el fondo en el modelo de caja, habrá una sensación de dislocación muy obvia visualmente:
Para resolver este problema, podemos borderreemplazar outline, porque outlinepuede configurar outline-offset. Este problema se puede resolver perfectamente:
div {
outline: 1px solid #333;
outline-offset: -1px;
&:hover {
outline: none;
}
}
复制代码Finalmente, observe el efecto aplicado al botón real:
El código completo de la demostración anterior es el siguiente:
Demostración de CodePen: animación de borde discontinuo
De hecho, debido a la relación especial entre el fondo y el borde, cuando
background-positionse puede resolver el uso del borde modificando , es para comparar. En cuanto a la relación de relleno entre el fondo y el borde, puedes leer este artículo: Múltiples implementaciones de bordes rayados.
Otros usos mágicos de los degradados
Usando gradientes, no solo se pueden lograr los efectos antes mencionados.
Continuamos profundizando en el degradado y lo usamos para lograr tal fondo:
div {
position: relative;
&::after {
content: '';
position: absolute;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
}
}
复制代码Tenga en cuenta que el gráfico generado por el pseudoelemento del elemento se utiliza aquí, y el ancho y el alto son todos del elemento principal 200%, más allá de la regla overflow: hidden.
A continuación, agregue rotación:
div {
animation: rotate 4s linear infinite;
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}
复制代码Ver el efecto:
Finalmente, use un pseudo elemento para enmascarar el medio, y saldrá una bonita animación de cuadros (la animación mostrará elementos semitransparentes, lo cual es conveniente para entender el principio):
El código completo de la demostración anterior es el siguiente. Vi este efecto por primera vez por este autor: Jesse B
Demostración de CodePen: animación de borde degradado
Cambiar el color del degradado
Después de dominar las habilidades básicas anteriores, podemos hacer algunos ajustes a los colores del degradado. Convertiremos 4 colores en 1 color:
div::after {
content: '';
position: absolute;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: #fff;
background-repeat: no-repeat;
background-size: 50% 50%;
background-position: 0 0;
background-image: linear-gradient(#399953, #399953);
}
复制代码Obtenga un gráfico de este tipo:
Del mismo modo, déjelo girar juntos y aparecerá una animación de borde de persecución monocromática:
Demostración de CodePen: animación de borde degradado 2
Vaya, se ve bien. Sin embargo, si es una sola línea, hay un defecto obvio, es decir, el final del cuadro es un pequeño triángulo en lugar de vertical, puede que no sea adecuado para algunas escenas o PM no lo pueda aceptar.
¿Hay alguna forma de eliminar estos pequeños triángulos? Sí, a continuación presentaremos un método para usar clip-pathy eliminar estos pequeños triángulos.
conic-gradient Efecto mágico
Reintroducido clip-pathantes de la primera curva para hablar sobre el cambio gradual.
El gradiente lineal se usa principalmente arriba linear-gradient. Usamos el ángulo de degradado conic-gradientde hecho, también puede lograr exactamente el mismo efecto.
Intentamos utilizarlo conic-gradienttambién realizado de nuevo, esta vez en un estilo diferente de Diablo. El código central es el siguiente:
.conic {
position: relative;
&::before {
content: '';
position: absolute;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
animation: rotate 4s linear infinite;
}
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}
复制代码Las representaciones y los diagramas esquemáticos son los siguientes. Gire una parte de los gráficos de degradado angular y use otro pseudo elemento para enmascarar la parte central, dejando solo la parte de la línea:
Demostración de CodePen - Borde giratorio 3
clip-path Efecto mágico
Es un viejo amigo de nuevo clip-path, nunca faltará por cosas interesantes.
clip-path Puede animar los puntos de coordenadas en sí y transformar de una forma de recorte a otra forma de recorte.
Usando esta función, podemos lograr inteligentemente tal efecto de seguimiento de borde. El pseudocódigo es el siguiente:
div {
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid gold;
animation: clippath 3s infinite linear;
}
}
@keyframes clippath {
0%,
100% {
clip-path: inset(0 0 95% 0);
}
25% {
clip-path: inset(0 95% 0 0);
}
50% {
clip-path: inset(95% 0 0 0);
}
75% {
clip-path: inset(0 0 0 95%);
}
}
复制代码Imagen de efecto y diagrama esquemático juntos:
CodePen - animación de borde de ruta de clip
Aquí, debido a que cortará elementos tomados de pseudoelementos y las animaciones se pueden cortar como fondo, usar clip-pathlas ventajas del recorte del borde no producirá un triángulo pequeño. Al mismo tiempo, este enfoque también es compatible con filete border-radiusde.
Si usamos otro pseudo-elemento para implementar realmente un estilo de botón, podemos obtener este efecto:
CodePen - animación de borde de ruta de clip 2
overflow Efecto mágico
La siguiente técnica se implementa mediante desbordamiento. Para lograr tal animación de borde:
¿Por qué se usa overflowpara lograr?
Publica un diagrama esquemático:
Dos puntos centrales:
- Usamos
overflow: hiddenpara ocultar un elemento completo originalmente fuera del contenedor. - Usado
transform-origin, controló el centro de rotación del elemento.
De hecho, casi la mayoría de los efectos CSS interesantes utilizan técnicas similares:
En pocas palabras, la animación que vemos es solo una pequeña parte del fenómeno original.A través de recortes específicos, cambios en la transparencia, enmascaramiento, etc., finalmente vemos solo una parte del fenómeno original.
border-image Efecto mágico
Utilizando border-image, también podemos implementar algunas animaciones de borde interesantes. Al respecto border-image, hay un muy buen artículo para explicar el uso correcto de imagen de borde, este artículo no explica demasiado la definición básica.
Si tenemos una imagen así:
Puede utilizar border-image-slicey border-image-repeatlas características del borde para obtener un patrón similar:
div {
width: 200px;
height: 120px;
border: 24px solid;
border-image: url(image-url);
border-image-slice: 32;
border-image-repeat: round;
}
复制代码Sobre esta base, puede cambiar la altura y el ancho del elemento a voluntad, para que pueda extenderse a cualquier tamaño de borde de contenedor:
Demostración de CodePen: demostración de imagen de borde
Luego, en este artículo: Cómo animar una imagen de borde con SVG , también es para explicar el uso de una border-imageanimación de cuadros, muy bueno.
La diferencia con el ejemplo anterior es que solo necesitamos hacer que nuestros patrones se muevan, es decir, necesitamos una imagen de fondo de este tipo (los Nuggets no admiten imágenes en movimiento SVG, la dirección de la imagen original ):
Luego, también podemos obtener la imagen del borde en movimiento, el código es exactamente el mismo, pero el borde se está moviendo:
Demostración de CodePen - Borde de calavera danzante
border-image Usar gradiente
border-imageAdemás de un mapa de referencia en el urlexterior, pero también se puede rellenar directamente o con degradado de color.
Antes también de un artículo sobre el border-imageartículo: hábilmente logrado con borde degradado de esquinas redondeadas
Podemos usar border-image+ filter+ para clip-pathlograr el borde redondeado de la transformación gradual:
.border-image-clip-path {
width: 200px;
height: 100px;
border: 10px solid;
border-image: linear-gradient(45deg, gold, deeppink) 1;
clip-path: inset(0px round 10px);
animation: huerotate 6s infinite linear;
filter: hue-rotate(360deg);
}
@keyframes huerotate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
复制代码
Finalmente, si necesita estos materiales, puede hacer clic aquí para obtenerlos.
