¿Cómo crear el efecto Super Saiyan en CSS / JS?

Cuando era niño, solía leer todos los libros de manga de Dragon Ball.

¡El efecto Super Saiyan (que rodea el aura y el rayo) es realmente genial!

Ahora tengo una página de eventos que enumera todos los próximos eventos en tarjetas y se ve así:

enter image description here

Y aquí está el código

Uno de ellos es un evento especial.

Entonces esto es lo que quiero:

¡Quiero que este evento especial esté rodeado por el efecto “Super Saiyan”!

Entonces se verá así:

enter image description here (Lo siento, el Saiyan no está dibujado bellamente, pero el efecto está bien abordado)

¡Entonces habrá muchos rayos y llamas alrededor de esta tarjeta de evento, y fluirán!

Lo siento, no puedo encontrar ningún código CSS para este, ya que ni siquiera estoy seguro de si se puede hacer por CSS o no.

¿Es posible?


Actualizar

Si esto es imposible, ¿qué hay del rayo estático y las llamas (KI)? Y tiene que ser receptivo.


Actualización 2

Además, esta página es receptiva, y sería terrible si la llama y el rayo se colocaran incorrectamente cuando la página cambiara de tamaño. Entonces, así es como se ve en una pantalla más pequeña

enter image description here


Actualización 3

Aquí está mi código CSS para la tarjeta de evento:

 .event { margin:10px; text-transform: uppercase; } .icon { background: #545454 url(../Content/img/event-icon.png) no-repeat center center; background-size:cover; min-height: 250px; height: 250px; width: auto; min-width: 250px; display: flex; -ms-flex-direction: column; flex-direction: column; align-items: center; justify-content: center; } .title{ font-weight: 700; color:#6c6c6c; font-size: 67px; text-shadow: 0 1px 0 rgba(0,0,0,.5); } .sub-title{ overflow: hidden; font-size: 18px; text-shadow: 0 1px 0 rgba(0,0,0,.4); color:#87e300; text-transform: uppercase; font-style: normal; font-weight: normal; font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -o-font-smoothing: antialiased; -ms-font-smoothing: antialiased; font-smoothing: antialiased; } .event-time{ color:orange; font-size:25px; } .sub-icon { display: flex; -ms-flex-direction: column; flex-direction: column; justify-content: center; align-items: center; align-content: space-around; background: #f3f3f3; font-size: 15px; font-weight: bold; font-style: normal; line-height: 1.1; text-transform: uppercase; font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif; } .sub-icon span { display: inline-block; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; width: 200px; white-space: nowrap; color:black; } .sub-icon div{ margin-top : 10px; margin-bottom:10px; } .event-day{ font-size:24px; line-height:0.85; font-style:normal; font-weight:normal; color: #6c6c6c; } .event-month{ color: #cccbcb; font-size: 42px; } .event-time{ color:orange; font-size:25px; } .event-notice { color: #87e300; font-size: 14px; font-weight:600; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; line-height: .95; font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif; } .event-title{ font-size:16px; font-weight:800; color:white; font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif; } .event-slogan{ font-size:14px; font-weight:600; color: #999; } @media (max-width: 767px) { .event-sm { display: flex !important; } } 

SVG

CODEPEN

Estoy un poco inseguro si querías el brillo KI amarillo o la iluminación, así que fui por el efecto de iluminación.

Reutilicé una forma simple de con el elemento .

La forma de iluminación se toma de Gohan. La iluminación superior izquierda. Foto

 body { margin: 0; } .main { background-color: black; width: 100vw; height: 100vh; } .calander {} .calander h2 { margin: 0; color: white; text-align: center; } .calander .event-grid { margin: 0 5%; } .event-grid .event { position: relative; display: inline-block; width: 30%; height: 250px; margin: 1%; text-align: center; background: -moz-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #4c4c4c), color-stop(100%, #212121)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #4c4c4c 0%, #212121 100%); } .event .date { color: #666; font-size: 3em; margin-bottom: 10px; text-shadow: 0px 1px #222; } .event .time { font-size: 1.4em; color: #dd8834; } .event .note { font-size: 1.3em; color: LawnGreen; } .event .bottom-reg { position: absolute; bottom: 0; height: 25%; width: 100%; background-color: white; } .event .bottom-reg p { margin: 5px 0; } .event .bottom-reg input { text-align: center; color: white; background-color: #55f; border: 1px solid #99f; } ::-webkit-input-placeholder { /* WebKit browsers */ color: white; font-weight: bold; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: white; font-weight: bold; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: white; font-weight: bold; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: white; font-weight: bold; } .test { display: none; } .spesial { z-index: 5; position: absolute; top: -25%; left: -25%; width: 150%; height: 150%; } 
 

UPCOMING EVENTS

16 APR

8:00 PM
registration

LRC

19 APR

10:00 PM
registration

LRC

23 APR

8:00 PM
registation

LRC

Puede que esta no sea la mejor manera, pero una manera rápida podría ser descargar un gif animado de super saiyan, hacerlo transparente, editar el personaje y luego usar css para superponer la imagen en tu evento.

Super Saiyan gif

Con un mejor software de edición de fotos, esto podría parecer mucho mejor, pero esto solo me llevó unos 5 minutos.

Aquí está el código: http://codepen.io/anon/pen/gpLMGr

 

19 APR

10:00 PM
registration

LRC

Simplemente ubico la imagen sobre el rest del objeto del evento, y su ancho y altura dependen del div evento.

Descargo de responsabilidad : este código es para lulz.

Movido por la curiosidad, he creado un pequeño ejemplo que te puede gustar:

enter image description here

Ejecutando demo en jsFiddle


Efecto de rayos

Utilicé el HTML5 Canvas Lightning de este violín , que a su vez es una bifurcación de los Lightning Points de akm2 (Lightning 2) ; el canvas se coloca debajo de un div con 0.99 de opacity , 20px tamaño en cada lado, para dar el efecto de rodear los límites, pero solo de unos pocos píxeles.

Efecto de fuego

El efecto de fuego en CSS es fácilmente alcanzable con la propiedad text-shadow ; He tomado parte de esto, pero es el mismo código que he visto en docenas de artículos / violines, probablemente el primero sea el que está en el segundo enlace .

Dado que esto se aplica solo al texto y no a, por ejemplo, a los divs, he utilizado el atributo de content del pseudo-elemento anterior del .sayan div para crear un gran texto compuesto por símbolos (por una razón romántica, I ‘ he usado el Go (悟) kanji de Goku (悟空), pero lo importante es que no es un personaje alfabético reconocible, o adiós efecto de aura … pruébalo con content: 'a'; ), y yo ‘ lo puse entre el canvas y el div con un z-index negativo.

Este es solo un experimento de diversión, no de código de producción ni de material receptivo, como se pregunta en la pregunta (aunque si cambia el tamaño de la página, los divs se mueven y el div sayan conservará sus capacidades); mi bash de responder la pregunta:

¿Es posible hacerlo, y cómo?

, que espero les haya gustado

Si quieres transformarlo en algo más serio, hay mucho trabajo por hacer (en primer lugar, modifica el guión para hacer que algunos puntos se muevan solo por los lados, para evitar tenerlos todos dentro del recuadro), pero Todavía le sugiero que use un PNG animado transparente, o como sea, algo más fácil y menos asesino de CPU que este, hecho declarativamente por el bien del lulz;)