在 CSS 中创建动画超级赛亚人效果 - 从哪里开始？ [复制]答案

【问题标题】：Creating animated Super Saiyan Effect in CSS - Where to Start? [duplicate]在 CSS 中创建动画超级赛亚人效果 - 从哪里开始？ [复制]
【发布时间】：2015-12-08 18:51:00
【问题描述】：

我对 CSS 和一些 JQuery 有相当的了解，但我有一个有点雄心勃勃的想法（至少对我自己而言）。

我希望在纯 CSS 中创建动画超级赛亚人发光/光环效果。

我不太确定从哪里开始，或者为了完成这个项目我应该学习什么，所以如果可能的话，我希望能找到一些方向。

【问题讨论】：

标签： jquery css

【解决方案1】：

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

想法

有一个很棒的例子，它可以在悬停时移动，你可以很容易地做出这个效果。

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

使用在线生成器制作形状

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

你可以使用这个基本的 CSS 动画，让它更漂亮： 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>

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

【讨论】：

【解决方案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 动画对其进行动画处理。

【讨论】：