在CSS中创建动画超级赛亚人效果 - 从哪里开始？

Question

我对CSS和一些JQuery有很好的了解，但我有点想要一些雄心勃勃的东西（至少对我自己而言）。

我希望用纯CSS制作动画超级赛亚人的光晕/光环效果。

我不太确定从哪里开始或者我应该学习什么来完成这个项目，所以我希望在可能的情况下找到方向。

Answer 1

我会在HTML5中使用CSS剪辑蒙版。 http://www.html5rocks.com/en/tutorials/masking/adobe/#toc-animation-of-clip-path（直接链接）

想法

这是一个很棒的例子，当它悬停时会移动，你可以很容易地产生这种效果。

using (var context = new DragonLairContext())
{
    Tournament tournament = context.Tournaments 
            .Include(a => a.Game)
            .Include(g => g.Game.Genre)
            .Include(b => b.Groups.Select(g => g.Teams))
            .Include(c => c.TournamentType)
            .FirstOrDefault(d => d.Id == id);

    return tournament;               
}

使用在线生成器制作形状

如果你想制作“效果”的基本形状。快速。您可以使用THIS WEBSITE

你使用这个基本的CSS动画，让它更漂亮： http://codepen.io/SaraSoueidan/pen/17dd591f451f4757366faf3c9246504b

＆＃13;

＆＃13;

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, ...);
  }
}

＆＃13;

@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);
} 

＆＃13;

＆＃13;

＆＃13;

我会用更多的例子来编辑我的答案。

Answer 2

您可以尝试在CSS3中使用阴影效果和动画。点击此处了解更多信息：http://www.w3schools.com/css/css3_animations.asp

这项技术的一些很酷的例子：http://zurb.com/playground/css-boxshadow-experiments

编辑：正如Kees Sonnema建议使用剪辑路径是一个好主意，帮助您控制形状。阴影效果（http://www.w3schools.com/css/css3_shadows.asp）会使你的“火焰”发光，然后你可以通过标准的CSS 3动画为它制作动画。