Ответ 1

SVG

CODEPEN

Я немного не уверен, если вы хотите желтое свечение KI или освещение, поэтому я пошел на эффект освещения.

Я снова использовал простой <svg> с элементом <use> .

Форма освещения взята из Гохана. Верхнее левое освещение.

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>

Ответ 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.

Ответ 3

_{Отказ от ответственности: этот код предназначен для lulz.}

Перемещенный любопытством, я создал небольшой пример, который вам может понравиться:

Запуск демо на jsFiddle

Эффект молнии

Я использовал HTML5 Canvas Lightning из эту скрипку, которая сама по себе является вилкой akm2 Очки молнии (молния 2); холст затем помещается под div с 0.99 of opacity, 20px с большими размерами с каждой стороны, чтобы дать эффект окружающего границы, но только несколько пикселей.

Эффект пожара

Эффект огня в CSS легко реализуется с помощью свойства text-shadow; Я принял части это, но это тот же код, который я видел десятки раз во многих статьях/скрипках, возможно, первый когда-либо тот, что во второй ссылке.

Поскольку это относится только к тексту, а не к, например, к div, я использовал атрибут content псевдоэлемента :before в элементе .sayan для создания огромного текста, состоящего из символов ( по романтичной причине я использовал иероглиф Go (悟) от Goku (悟空), но важно то, что это не узнаваемый алфавитный характер или прощай эффект ауры... попробуйте сами с помощью content: 'a';), и я положил его между холстом и div с отрицательным z-index.

Это просто эксперимент для удовольствия, а не производственный код или отзывчивый материал, как задано в вопросе (хотя, если вы измените размер страницы, divs перейдут, а sayan div сохранит свои возможности); моя попытка ответить на вопрос:

можно ли это сделать и как?

надеюсь, вам понравилось.

Если вы хотите превратить его в нечто более серьезное, нужно много сделать (прежде всего, измените script, чтобы некоторые точки перемещались только по сторонам, чтобы не допустить их всех внутри квадрат), но я по-прежнему предлагаю вам использовать прозрачный анимированный PNG или, как ни странно, что-то проще и меньше CPU-killer, чем это, декларативно сделанное ради lulz;)