Implementación CSS de habilidades de cupones

En el proceso de desarrollo web real, siempre encontrará una variedad de diseños. Un colega de la empresa me preguntó si había alguna buena forma de implementar dicho diseño, que es un efecto de cupón muy común en la página de recarga del evento, de la siguiente manera

Hay esto

Teniendo en cuenta varios escenarios posibles, resuma los siguientes casos, echemos un vistazo a la implementación juntos

1. La mejor forma de lograr

En primer lugar, la mejor implementación para este tipo de diseño es definitivamente una máscara . Con respecto a la máscara, puedes echar un vistazo al informe CSS3 Mask Amway . Aquí hay una breve introducción.

La gramática básica es muy simple, básicamente consistente con la gramática de fondo.

.content{
  -webkit-mask: '遮罩图片' ;
}
/*完整语法*/
.content{
  -webkit-mask: '遮罩图片' [position] / [size] ;
}
复制代码

El uso de la imagen de la máscara y el fondo es básicamente el mismo. Puede ser una imagen PNG , una imagen SVG o una imagen dibujada en degradado , y también admite la superposición de múltiples imágenes .

El principio de la máscara es muy simple, el efecto final solo muestra la parte opaca, la parte transparente no será visible, la analogía translúcida

De hecho, además de utilizar la transparencia (Alfa) como condición de enmascaramiento, también se puede determinar por el brillo (luminancia), por ejemplo, blanco significa oculto y negro significa visible. Pero actualmente solo admite Firefox

Por lo tanto, siempre que se puedan dibujar las formas anteriores, se puede lograr.

Dos, filete cóncavo

La mayoría de los cupones tienen una característica obvia, que son las esquinas redondeadas cóncavas . Cuando se trata de esquinas redondeadas, es fácil pensar en gradientes radiales . Esta gramática es un poco complicada, no importa si no la recuerdas, puedes echar un vistazo a estos 10 ejemplos de demostración del profesor Zhang para aprender el gradiente radial de gradiente radial CSS3 .

.content{
  -webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px); 
}
复制代码

Esto dibuja un círculo transparente con un radio de 20px, pero todavía hay mucho espacio para la optimización a nivel de código.

1. Al implementar un degradado con un límite claro, la posición del color de fondo solo debe ser menor o igual que la posición del color de frente, como 0
2. El color transparente puede ser abreviaturas hexadecimales como ** # 0000 en su lugar , una parte opaca casualmente con un color como, me gusta usar rojo **, principalmente palabra corta
3. La posición del degradado está centrada de forma predeterminada, por lo que el segundo centro se puede eliminar y la izquierda se puede representar con 0

Simplifique aún más y obtenga

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0); 
}
复制代码

Sí, hay mucho menos tráfico para B ~ Puede consultar los cupones de codepen de ejemplo en línea para lograr 1

3. Efecto cupón

Lo anterior es el efecto de esquina redondeada cóncava más básico. Ahora implementemos los siguientes diseños, como dos semicírculos. Según el ejemplo anterior, ¿podemos copiar otro círculo? Cambiar la dirección de posicionamiento

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); 
}
复制代码

En este momento, se encontró que ninguno de los círculos había desaparecido. La razón es realmente muy simple: en la siguiente demostración, las dos capas de fondo se superponen entre sí, lo que hace que todo el fondo se vuelva opaco , por lo que el efecto de máscara parece ser completamente visible.

Hay dos soluciones, a saber:

1. Alterne las dos esquinas cóncavas, aquí puede modificar el tamaño y la posición, y al mismo tiempo debe prohibir el mosaico.

.content{
-webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0);
-webkit-mask-size: 51%; /*避免出现缝隙*/
-webkit-mask-position: 0, 100%; /*一个居左一个居右*/
-webkit-mask-repeat: no-repeat;
}
复制代码

La demostración dinámica es la siguiente, para que no se cubran entre sí.

Puede ver el ejemplo en línea de la implementación del cupón codepen 2

1. Use la máscara para sintetizar el compuesto de máscara , esto puede no ser familiar, vamos a presentarlo brevemente

Hay 4 valores de atributo para el compuesto de máscara en los atributos estándar (compatible con Firefox)

/* Keyword values */
mask-composite: add; /* 叠加（默认） */
mask-composite: subtract; /* 减去，排除掉上层的区域 */
mask-composite: intersect; /* 相交，只显示重合的地方 */
mask-composite: exclude; /* 排除，只显示不重合的地方 */
复制代码

Esto puede resultar un poco difícil de entender. De hecho, puede consultar las operaciones de síntesis de formas de algunos programas de software de gráficos, como Photoshop

-webkit-mask-composite es diferente del valor estándar, hay muchos valores de atributos, ver más abajo

-webkit-mask-composite: clear; /*清除，不显示任何遮罩*/
-webkit-mask-composite: copy; /*只显示上方遮罩，不显示下方遮罩*/
-webkit-mask-composite: source-over; 
-webkit-mask-composite: source-in; /*只显示重合的地方*/
-webkit-mask-composite: source-out; /*只显示上方遮罩，重合的地方不显示*/
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in; /*只显示重合的地方*/
-webkit-mask-composite: destination-out;/*只显示下方遮罩，重合的地方不显示*/
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor; /*只显示不重合的地方*/
复制代码

¿Fue estupefacto? No entre en pánico, puede ver que algunos de los valores anteriores son fuente- *, y algunos comienzan con ** destino - ***. La fuente representa el nuevo contenido , que es la capa dibujada arriba, y el destino representa la meta contenido . Es la capa dibujada a continuación ( en CSS, la capa anterior cubrirá la capa posterior ), el valor del atributo aquí en realidad se toma prestado del concepto en Canvas, puede consultar CanvasRenderingContext2D.globalComposite para obtener más detalles

No importa si no puede recordar, el desarrollo real se puede probar uno por uno [\ cover face]. Para conocer las diferencias específicas, puede consultar la demostración del valor del atributo codepen -webkit-mask-composite

Después de comprender este atributo, el problema de superposición anterior es muy simple, solo configúrelo para mostrar solo los lugares superpuestos .

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); 
  -webkit-mask-composite: source-in | destination-in ; /*chrome*/
  mask-composite: intersect; /*Firefox*/
}
复制代码

La demostración dinámica es la siguiente, de modo que solo se mostrarán los lugares que se superponen entre sí

Puede ver el ejemplo en línea de la implementación del cupón codepen 3

Se realizan 2 esquinas redondeadas, 4 es fácil, solo dibuja 4 círculos, también se puede realizar fácilmente usando la síntesis de máscara

content{
  -webkit-mask: radial-gradient(circle at 0 0, #0000 20px, red 0), radial-gradient(circle at right 0, #0000 20px, red 0), radial-gradient(circle at 0 100%, #0000 20px, red 0), radial-gradient(circle at right 100%, #0000 20px, red 0); /*4个角落各放一个圆*/
  -webkit-mask-composite: source-in | destination-in ; /*chrome*/
  mask-composite: intersect; /*Firefox*/
}
复制代码

Puede ver el ejemplo en línea de la implementación del cupón codepen 4

4. Efecto de mosaico de cupón

El ejemplo anterior muestra el efecto de 2 esquinas redondeadas y 4 esquinas redondeadas. Se dibujan 2 y 4 círculos respectivamente. De hecho, esto se puede lograr mediante mosaico, y solo se necesita un círculo. Los pasos de implementación son los siguientes

1. Dibuja un círculo transparente en el lado izquierdo.

.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); 
}
复制代码

1. Desplaza la mitad de sí mismo hacia la izquierda

.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px
}
/*也可以缩写为*/
.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0) -20px; 
}
复制代码

El efecto está fuera, ¿no es asombroso? De hecho, se utiliza la función de repetición predeterminada , que se puede entender con una imagen en movimiento.

El marco rojo a continuación indica el alcance de la ventana gráfica , que es el efecto final. Para fines de demostración, los mosaicos fuera de la línea de visión son translúcidos y el movimiento indica el proceso de cambio de posición.

Puede ver el ejemplo en línea de la implementación del cupón de codepen 5

El mismo principio, también se pueden lograr 4 esquinas redondeadas de esta manera

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px -20px;
}
/*也可以缩写为*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px; 
}
复制代码

El principio de realización se demuestra de la siguiente manera

Puede ver el ejemplo en línea de la implementación del cupón de codepen 6

6 esquinas redondeadas necesitan cambiar el tamaño de la baldosa.

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px -20px;
  -webkit-mask-size: 50%;
}
/*也可以缩写为*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; 
}
复制代码

El principio de realización se demuestra de la siguiente manera

Puede ver el ejemplo en línea de la implementación del cupón de codepen 7

Si continúa reduciendo el tamaño de la imagen de fondo, aún puede obtener el efecto final

.content{
  -webkit-mask: radial-gradient(circle at 10px, #0000 10px, red 0); 
  -webkit-mask-position: -10px;
  -webkit-mask-size: 100% 30px;
}
/*也可以缩写为*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -10px / 100% 30px; 
}
复制代码

El principio de realización se demuestra de la siguiente manera, de hecho, está en mosaico

Puede ver los cupones de codepen de ejemplo en línea para lograr 8

V. superposición hueca inversa

En algunos casos, es posible que una sola capa de degradado no pueda dibujar gráficos muy complejos. Esto requiere el uso de tecnología de vaciado inverso. De hecho, es la síntesis de máscara mencionada anteriormente. Vamos a usarla aquí.

1. Tome la implementación anterior primero

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; 
}
复制代码

1. Haga una fila de pequeños agujeros directamente sobre esta base.

.content{
  -webkit-mask: radial-gradient( circle at 50%, red 5px, #0000 0) 50% 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract; /*Firefox*/
}
复制代码

Tenga en cuenta que ** - webkit-mask-composite: destination-out ** se usa aquí, lo que significa restar, solo se muestra la máscara inferior y no se muestran las áreas superpuestas

Puede ver los cupones de codepen de ejemplo en línea para lograr 9

También se puede colocar en ambos lados, solo cambia la posición .

.content{
  -webkit-mask: radial-gradient( circle at 5px, red 5px, #0000 0) -5px 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract; /*Firefox*/
}
复制代码

Puede ver los cupones de codepen de ejemplo en línea para lograr 10

Seis, máscara de borde

Algunos estudiantes sienten que los degradados radiales son demasiado complicados de escribir. ¿Puedes reemplazarlos con imágenes ? De hecho, es factible. La máscara de borde que se menciona aquí se refiere a mask-border , que todavía está en el borrador del W3C, pero hay un atributo alternativo -webkit-mask-box-image

La gramática y el concepto son muy similares a imagen de borde . Para imagen de borde, consulte este artículo sobre el uso correcto de imagen de borde . Aquí entendemos principalmente el uso y el efecto.

.content{
  -webkit-mask-box-image: '遮罩图片' [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
}
复制代码

Por ejemplo, hay una imagen como esta

El código SVG es tan largo que se pueden exportar muchas herramientas, es realmente imposible contactar directamente con los compañeros de diseño.

<svg xmlns="http://www.w3.org/2000/svg" width="60.031" height="60.031" viewBox="0 0 60.031 60.031"><path d="M40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0V20.127h.065A20.066 20.066 0 0 0 20.131.061v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064V40A20.063 20.063 0 0 0 40 60.027z" fill-rule="evenodd"/></svg>
复制代码

Aquí debe escaparse, puede usar la herramienta de combinación en línea SVG de Teacher Zhang

.content{
  -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.031' height='60.031' viewBox='0 0 60.031 60.031'%3E%3Cpath d='M40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0V20.127h.065A20.066 20.066 0 0 0 20.131.061v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064V40A20.063 20.063 0 0 0 40 60.027z' fill-rule='evenodd'/%3E%3C/svg%3E") 20;
  /*这里的20表示四周保留20像素的固定区域，剩余部分平铺或者拉伸*/
}
复制代码

Entonces se da cuenta de tal forma, que también es adaptativa

Puede ver el ejemplo en línea de la implementación de codepen -webkit-mask-box-iamge 1

Por ejemplo, hay una imagen como esta

.content{
  -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.031' height='60.031' viewBox='0 0 60.031 60.031'%3E%3Cpath d='M55.186 30.158a4.965 4.965 0 0 0 4.841 4.959V40A20.063 20.063 0 0 0 40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0v-4.888c.054 0 .1.016.158.016a4.973 4.973 0 1 0 0-9.945c-.054 0-.1.014-.158.015v-5.074h.065A20.066 20.066 0 0 0 20.131.058v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064v5.07a4.965 4.965 0 0 0-4.841 4.966z' fill-rule='evenodd'/%3E%3C/svg%3E") 20;
}
复制代码

Puede obtener esa forma, el semicírculo en ambos lados se estira

En este momento, solo necesita establecer el método de mosaico ** - webkit-mask-box-image-repeat, ** Este es el mismo concepto que border-image-repeat y tiene los siguientes 4 valores

-webkit-mask-box-image-repeat: stretch; /*拉伸(默认)，不会平铺*/
-webkit-mask-box-image-repeat: repeat; /*重复*/
-webkit-mask-box-image-repeat: round; /*重复，当不能整数次平铺时，根据情况拉伸。*/
-webkit-mask-box-image-repeat: space; /*重复，当不能整数次平铺时，会用空白间隙填充*/
复制代码

Las diferencias entre varios métodos de mosaico son las siguientes

Aquí podemos usar redondo o repetir

.content{
  -webkit-mask-box-image: url("...") 20;
  -webkit-mask-box-image-repeat: round;
}
复制代码

Puede ver el ejemplo en línea codepen -webkit-mask-box-iamge deployment 2

Siete, resumen y explicación

Lo anterior presenta un total de 12 casos de cupones de dibujo, que deberían resolver la mayoría de estos problemas de diseño. Estos son los puntos siguientes

1. La máscara CSS debe ser la forma perfecta de implementar este tipo de diseño.
2. Necesita habilidades de dibujo de gradiente radial CSS
3. Utilice repetir tanto como sea posible para repetir los mismos elementos
4. Se requiere un uso flexible de mascarilla compuesta cuando se superponen múltiples formas
5. También puede usar imágenes en lugar de degradados CSS, debe usar máscara-borde

Con respecto a la compatibilidad, de hecho, no hay un gran problema independientemente de IE. El borde de máscara final actualmente solo es compatible con el kernel de Chrome, y el terminal móvil se puede usar con confianza

Gracias por leer y espero ser iluminado para el trabajo futuro.

Autor: equipo de front-end lea el
enlace de texto : https: //juejin.cn/post/6945023989555134494