[Especial de Dragon Ball] Dibuja un Radar de Dragon Ball con CSS puro

Estoy participando en el evento de experiencia Nuggets sobre el código, detalles: muestra tus bloques de código creativo

prefacio

Los amigos que han visto Dragon Ball cuando eran jóvenes pueden esperar que realmente haya un tesoro secreto como Dragon Ball en el mundo para que lo busquemos. Después de recolectarlos todos, pide un deseo al dragón para cumplir nuestro deseo. Tal vez lo hagamos. tengamos este tipo de visión hasta que seamos mayores, por lo que este problema Un efecto de radar de dragon ball se realizará utilizando css puro. Y de acuerdo a su producción, hablemos de algunos consejos para dibujar animación de imágenes con css.

código

code.juejin.cn/pen/7085312…

texto

1. Dibujo de cuadrícula

Si la cuadrícula del radar está escrita en etiquetas HTML, consume mucho tiempo y es antiestética, por lo que la usaremos repeating-linear-gradientpara crear un segmento de línea de 1 píxel repitiendo degradados lineales. Por supuesto, el segmento de línea se divide en horizontal y vertical El ángulo se puede pasar en el parámetro.

Forma de sintaxis:repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

Por supuesto, el segmento de línea por sí solo no es suficiente para convertirse en una malla. También debemos agregar algunos colores de fondo para reflejar estas mallas. Por ejemplo radial-gradient, para lograr un degradado circular, el propósito es lograr un efecto de resaltado cerca del medio. Finalmente, dé linear-gradientun degradado verde para terminar la superposición.

.randar-content {
    // ...
    background: 
        radial-gradient( #afadad 50%, #0a0a0a),
        repeating-linear-gradient(
          0deg,
          var(--line-color) 0px,
          var(--line-color) 1px,
          transparent 1px,
          transparent 25px
        ),
        repeating-linear-gradient(
          90deg,
          var(--line-color) 0px,
          var(--line-color) 1px,
          transparent 1px,
          transparent 25px
        ),
        linear-gradient(135deg, var(--green), var(--green));
    background-position-x: 20px;
    background-position-y: 7px;
}
复制代码

En este momento, encontramos que esto no es suficiente, la cuadrícula no es nueva y no hay un fondo verde, solo se genera el resaltado gris, no se preocupe, aún no ha terminado, tenemos que configurarlo background-blend-mode, eso Es decir, el modo de fusión del fondo cambia soft-light, de modo que aparecerá el verde tanto del fondo como de la cuadrícula. Y aquí también agregamos will-change, proporciona una forma para que los desarrolladores web le digan al navegador qué cambios se realizarán en el elemento, de modo que el navegador pueda realizar los preparativos de optimización correspondientes por adelantado antes de que los atributos del elemento realmente cambien. Esta optimización puede preparar una parte del trabajo de cálculo complejo por adelantado, haciendo que la página sea más receptiva y receptiva.

.randar-content {
    // ...
    background-blend-mode: soft-light;
    will-change: transform;
}
复制代码

2. Interruptor de gatillo

En primer lugar, el interruptor consta de dos partes, la cabeza retráctil y la base. como sigue:

La implementación específica aquí se puede ver en el código de demostración, que es el dibujo CSS básico y no se describirá demasiado. Lo principal a explicar es cómo usar css puro para realizar la apertura y el cierre del interruptor sin usar js.

Lo que necesitamos aquí es la <input type="checkbox" />etiqueta , cuando la etiqueta está marcada, podemos dar la operación correspondiente a través de la pseudo-clase de css.

Después de verificar la activación, puede usar el selector + o ~ para encontrar otros elementos para cambiar, de la siguiente manera:

.randar-checkbox:checked,
.randar-checkbox:checked+.randar-top{
  transform: translateY(10px);
}

.randar-checkbox:checked~.randar-content .rander-ball,
.randar-checkbox:checked~.randar-content .rander-pos{
    display: block;
}

.randar-checkbox:checked~.randar-content::after{
    background-blend-mode: darken;
    animation: scan 5s linear infinite;
}
复制代码

3. Escaneo de radar

Aquí usamos el pseudo-elemento after debajo de la cuadrícula del radar como contenedor, y también linear-gradientcreamos una capa gris degradada con transparencia, y luego background-blend-modela configuramos con darken, para que pueda ver que la interfaz se dividirá por una línea con brillo obvio.

En este punto, siempre que sigamos girando el pseudoelemento posterior a través de la animationanimación dentro de un cierto período, nos hará sentir que este es el mismo efecto que el escaneo continuo.

Epílogo

En este caso, se utiliza una gran cantidad background-blend-modede mezclas de fondo. Aunque es muy fácil de usar, el navegador IE todavía no es tan amigable y el soporte de otros navegadores convencionales es relativamente bueno. Por ello, a la hora de desarrollar un proyecto, también se utiliza con cautela según las necesidades. Además, también debe usar hábilmente la superposición de backgroundvarios degradados de fondo y seguir superponiendo y dibujando. Siempre que tenga tiempo y paciencia, puede dibujar casi cualquier imagen, lo cual es muy impactante.