-2

I have a decent knowledge in CSS and some JQuery, but I had an idea for something a bit ambitious (at least for myself).

I'm looking to create the animated Super Saiyan glow/aura effect in pure CSS.

aura effect

I'm not quite sure where to begin or what I should learn in order to complete this project, so I was hoping for some direction if possible.

Francesco Casula
  • 26,184
  • 15
  • 132
  • 131
DRB
  • 633
  • 11
  • 24

2 Answers2

2

I would use CSS clipping masks with HTML5. http://www.html5rocks.com/en/tutorials/masking/adobe/#toc-animation-of-clip-path (direct link)

The idea

There's an awesome example which moves when hovered, you can make that effect easily.

img:hover {
  clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  animate: star 3s;
}

@keyframes star {
  0% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  },
  100% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  }
}

Making the shape using the online generator

If you want to make the basic shape of the 'effect' fast. You can use THIS WEBSITE

You an use this basic CSS animation and make it even prettier: http://codepen.io/SaraSoueidan/pen/17dd591f451f4757366faf3c9246504b

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);
body {
    background-color: #F5F5F5;
    color: #555;
    font-size: 1.1em;
    font-family: 'Lato', sans-serif;
}
.note {
  width: 600px;
  margin: 30px auto;
}

.element {   
  background-color: #f1c40f; 
  color: white;
  width: 500px; 
  height: 500px;
  margin: 30px auto;
  text-align: justify;
  shape-inside: polygon(250px 0, 350px 170px, 500px 180px, 380px 320px, 450px 500px, 250px 420px, 50px 500px, 120px 320px, 0px 180px, 150px 170px );
  shape-padding: 10px;
  transition: all 3s ease; 
  -webkit-clip-path: polygon(250px 0, 350px 170px, 500px 180px, 380px 320px, 450px 500px, 250px 420px, 50px 500px, 120px 320px, 0px 180px, 150px 170px );
} 
.element:hover{ 
   shape-inside: polygon(250px 0, 500px 0, 500px 180px, 500px 320px, 500px 500px, 250px 500px, 0 500px, 0 320px, 0 180px, 0 0);
  -webkit-clip-path: polygon(250px 0, 500px 0, 500px 180px, 500px 320px, 500px 500px, 250px 500px, 0 500px, 0 320px, 0 180px, 0 0);
} 
<p class="note">Hover over the element to see its shape animate. <span style="color:red">Please see browser support note at beginning of article.</span></p>
<div class="element">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel ratione qui voluptatum quod et quaerat dolorum odio consequuntur dolores! Ipsum commodi mollitia maiores expedita reiciendis ducimus qui unde! Odio molestias!
  </p>
</div>

I'll edit my answer with more examples.

Kees Sonnema
  • 5,759
  • 6
  • 51
  • 106
0

You can try to play with shadow effects and animations in CSS3. Look here for more information: http://www.w3schools.com/css/css3_animations.asp

Some cool example of this techinque: http://zurb.com/playground/css-boxshadow-experiments

EDIT: As Kees Sonnema suggested using clip-path is a great idea, helping you to control shape. Shadow effects(http://www.w3schools.com/css/css3_shadows.asp) will make your "flame" to glow and then you can animate it by standard CSS 3 animations.

Wiertek
  • 368
  • 1
  • 8