El efecto de onda de choque también se conoce como efecto de explosión. Es uno de los efectos CSS simples. Para un principiante, es uno de los mejores ejemplos para aprender el concepto de pseudo-elementos. El pseudo-elemento que estamos usando es hover . Te recomiendo que lo revises antes de saltar al código para entenderlo mejor. Para la sesión informativa, el desplazamiento se usa para aplicar estilos a un elemento cuando el mouse pasa sobre él.
- Código HTML: Al usar HTML, crearemos una estructura normal donde usaremos el efecto de explosión o de onda de choque.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Document</title></head><body><divclass="geeks"></div></body></html> - Código CSS: el primer paso es alinear nuestro div con el centro de la página usando flexbox , luego tenemos que crear un círculo usando la propiedad border-radius . Hemos aumentado el valor de su compensación en cada paso. Luego usaremos una duración de transición al div. Ahora use el selector de desplazamiento y copie y pegue la propiedad box-shadow que usamos anteriormente y aumentamos su valor de compensación. Hemos aumentado su valor para que al flotar se sienta como si saliera del centro (efecto de explosión). Puedes jugar con el color de la sombra del cuadro para tener una explosión de color diferente o incluso múltiple.
<style>body {margin:0;padding:0;background:black;display: flex;justify-content:center;align-items:center;height:100vh;}.geeks {width:20px;height:20px;background:green;border-radius:50%;box-shadow:0020pxrgb(127,153,127),0040pxrgb(127,153,127),0060pxrgb(127,153,127),0080pxrgb(127,153,127),00120pxrgb(127,153,127),00220pxrgb(127,153,127),00320pxrgb(127,153,127);transition:2s;}.geeks:hover {box-shadow:00030pxrgb(83,224,83),00060pxrgb(83,224,83),000100pxrgb(83,224,83),000120pxrgb(82,226,82),000200pxrgb(37,214,37),000400pxrgb(27,165,27),000450pxrgb(63,235,63);}</style>
Solución final: en esta sección combinaremos las dos secciones anteriores para lograr la tarea mencionada.
- Programa:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Document</title><style>body {margin: 0;padding: 0;background: black;display: flex;justify-content: center;align-items: center;height: 100vh;}.geeks {width: 20px;height: 20px;background: green;border-radius: 50%;box-shadow: 0 0 20px rgb(127, 153, 127),0 0 40px rgb(127, 153, 127),0 0 60px rgb(127, 153, 127),0 0 80px rgb(127, 153, 127),0 0 120px rgb(127, 153, 127),0 0 220px rgb(127, 153, 127),0 0 320px rgb(127, 153, 127);transition: 2s;}.geeks:hover {box-shadow: 0 0 0 30px rgb(83, 224, 83),0 0 0 60px rgb(83, 224, 83),0 0 0 100px rgb(83, 224, 83),0 0 0 120px rgb(82, 226, 82),0 0 0 200px rgb(37, 214, 37),0 0 0 400px rgb(27, 165, 27),0 0 0 450px rgb(63, 235, 63);}</style></head><body><divclass="geeks"></div></body></html> - Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA