如何在CSS/JS中创建超级赛亚人效果？

Question

当我还是个孩子的时候,我曾经读过所有龙珠漫画书.

超级赛亚人效果(周围的光环和闪电)非常酷!

现在我有一个活动页面,其中列出了卡中所有即将发生的事件,它看起来像这样:

这是代码

 <div class="col-sm-3 col-xs-12 event">
        <div class="row hidden-xs icon">
            <div class="title">16 Apr</div>
            <div class="event-time"><i>8:00PM</i></div>
            <div class="sub-title">Registration Opens 14 Apr</div>
        </div>

    <div class="row hidden-xs sub-icon">
        <div><span>LRC Thursday Night Run test long long</span></div>
        <div>
            <input type="button" class="btn btn-primary" value="Register" />
        </div>

    </div>

    <div class="row visible-xs-inline-block hidden-lg hidden-md hidden-sm event-sm">
        <div class="col-xs-4 event-left">
            <div class="event-day">16</div>
            <div class="event-month">apr</div>
            <div class="event-time"><i>8:00PM</i></div>
        </div>
        <div class="col-xs-8 event-right">
            <div class="event-notice">Registration Opens 14 Apr</div>
            <div class="event-title">LRC Night Run</div>
            <div class="event-slogan">Come run with us</div>
        </div>
    </div>
</div>

其中一个是特别活动.

所以这就是我想要的:

我希望这个特殊活动被"超级赛亚人"效应所包围!

所以它看起来像这样:

(对不起,赛亚人的画面并不精美,但效果很好)

所以这张活动卡周围会有很多雷击和火焰,它们正在流淌!

对不起,我不能为这个提出任何css代码,因为我甚至不确定它是否可以通过css完成.

可能吗？

---

更新

如果这是不可能的,静电闪电和火焰(KI)怎么样？而且必须要有回应.

---

更新2

此外,这个页面是响应性的,如果在页面调整大小时火焰和闪电被错误放置,那将是非常糟糕的.所以这就是它在小屏幕上的样子

---

更新3

这是我的事件卡的css代码:

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

Answer 1

SVG

CODEPEN

我有点不确定你是否想要黄色的KI发光或照明,所以我去了照明效果.

我使用<use>元素重用了一个简单的<svg>形状.

照明形状取自悟饭.左上角照明.

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%;
}

<div class="main">
  <section class="calander">
    <h2>UPCOMING EVENTS</h2>
    <div class="event-grid">
      <div class="event">
        <h1 class="date">16 APR</h1>
        <span class="time">8:00 PM</span>
        <br>
        <span class="note">registration</span>
        <div class="bottom-reg">
          <p>LRC</p>
          <input placeholder="REGISTER"></input>
        </div>
      </div>
      <div class="event">
        <h1 class="date">19 APR</h1>
        <span class="time">10:00 PM</span>
        <br>
        <span class="note">registration</span>
        <div class="bottom-reg">
          <p>LRC</p>
          <input placeholder="REGISTER"></input>
        </div>
        <div class="spesial">
          <svg width="100%" height="100%" viewBox="0 0 200 200">
            <use x="40" y="100" transform="scale(0.5) rotate(20)" xlink:href="#light" />
            <use x="150" y="-790" transform="scale(0.2) rotate(90)" xlink:href="#light" />
            <use x="0" y="200" transform="scale(0.35) rotate(-45)" xlink:href="#light" />
            <use x="-240" y="390" transform="scale(0.5) rotate(-70)" xlink:href="#light" />
            <use x="300" y="-90" transform="scale(0.4) rotate(90)" xlink:href="#light" />
          </svg>
        </div>
      </div>
      <div class="event">
        <h1 class="date">23 APR</h1>
        <span class="time">8:00 PM</span>
        <br>
        <span class="note">registation</span>
        <div class="bottom-reg">
          <p>LRC</p>
          <input placeholder="REGISTER" />
        </div>
      </div>
    </div>
  </section>
  <svg class="test" width="100px" height="100px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <path fill="#ddf" stroke="#ddf" id="light" d="m 0,0 c 6.24111,-8.9445 10.61204,-23.77912 17.97353,-53.80856 l 29.7995,-5.55584 35.35534,41.92133 c -1.95372,12.45653 45.89675,34.80534 61.61931,34.34518 -17.63651,5.49982 -9.56977,24.91725 2.52538,36.87057 C 139.10793,46.26094 131.45087,39.06432 122.46831,22.22336 118.45247,16.48431 87.40919,-0.96167 83.63345,0.73967 c -9.2424,4.06941 -3.52888,14.963 -1.51523,18.60117 -4.31715,4.656 -7.89706,8.06774 -8.43836,13.6677 0.0873,-12.34933 1.5179,-42.45863 -5.49456,-26.14667 L 65.95578,-14.91769 C 61.11992,-21.99984 48.27857,-50.5446 47.89033,-37.93673 46.10689,-46.50735 39.22534,-49.00909 35.6512,-48.25273 17.657,-46.88454 17.9011,-38.9303 16.45831,-31.58521 7.76504,-6.22367 6.56293,-8.29891 0,0 Z"
      />
    </defs>
  </svg>
</div>

Answer 2

这可能不是最好的方法,但一个快速的方法可能是下载动画的超级赛亚人的GIF,使其透明,编辑角色,然后使用CSS覆盖您的事件上的图像.

使用更好的照片编辑软件,这可能看起来好多了,但这只花了我大约5分钟.

这是代码:http://codepen.io/anon/pen/gpLMGr

<div class="event">
    <img id="saiyan" src="http://i.stack.imgur.com/CFoa1.gif" />
    <h1 class="date">19 APR</h1>
    <span class="time">10:00 PM</span>
    <br>
    <span class="note">registration</span>
    <div class="bottom-reg">
      <p>LRC</p>
      <input placeholder="REGISTER"></input>
    </div>
  </div>

<style>
    #saiyan {
      position: absolute;
      z-index: 1;
      width: 160%;
      height: 100%;
      left: -30%;
      top: 0;
    }
</style>

我只是将图像绝对放在事件对象的其余部分上,并使其宽度和高度取决于事件div.

Answer 3

_{免责声明:此代码适用于lulz.}

出于好奇,我创造了一个你可能想要的小例子:

在jsFiddle上运行demo

闪电效果

我已经使用了HTML5画布闪电从这个小提琴,这本身就是一个叉akm2的闪电点(闪电2) ; 然后将画布放置在div 0.99的下面opacity,20px每边都有超大尺寸,以产生围绕边界的效果,但只有几个像素.

火效果

CSS中的火焰效果很容易通过text-shadow财产实现; 我已经采取的部分这却是我见过的几十个时间多篇/小提琴相同的代码,可能是第一个曾经是一个在第二个环节.

因为这仅适用于文本,而不适用于div,我使用了div content的:before伪元素的属性.sayan来创建由符号组成的大文本(出于浪漫的原因,我使用了Go(悟)来自Goku(悟空)的汉字,但重要的是它不是一个可识别的字母字符,或者再见光环效果 ......自己尝试一下content: 'a';),我把它放在画布和div之间用消极的z-index.

这只是一个有趣的实验,而不是生产代码,也不是问题中提到的响应式内容(即使你调整页面大小,div会移动而且sayan div将保留其功能); 我试图回答这个问题:

是可以做到的,怎么做？

,我希望你喜欢.

如果你想把它变成更严肃的东西,还有很多工作要做(首先,改变脚本使一些点只沿着两侧移动,以防止所有这些都在广场内),但我仍然建议你使用一个透明的动画PNG,或者更容易和比这更简单的CPU杀手,为了lulz而声明性地制作;)