1 842 Codepen

Взрывной текст


Эффект взрывающегося текста, каждую букву оборачиваем в тег и анимируем на чистом CSS

HTML

Каждую букву оборачиваем в тег, конечно удобнее воспользоваться шаблонизатором для этого (в примере используется PUG)

<section>
  <div class="wrapper">
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">n</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">h</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">z</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">h</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">p</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">q</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">g</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">p</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">u</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">e</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">h</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">i</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">z</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">o</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">s</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">t</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">q</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">k</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">c</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">m</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">n</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">l</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">n</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">h</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">h</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">b</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">w</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">r</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">p</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">n</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">l</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">l</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">f</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">k</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">u</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">h</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">n</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">w</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">g</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">a</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">m</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">e</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">r</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">y</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">q</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">c</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">c</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">m</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">c</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">h</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">m</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">d</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">c</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">m</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">d</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">m</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">v</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">j</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">w</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">m</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">z</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">h</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">i</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">i</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">j</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">b</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">o</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">e</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">s</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">s</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">x</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">e</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">x</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">r</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">q</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">j</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">y</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">r</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">x</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">g</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">b</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">s</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">t</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">n</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">e</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">u</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">w</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">f</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">i</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">u</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">m</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">u</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">w</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">r</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">v</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">l</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">v</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">i</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">d</div>
      </div>
    </div>
    <div class="ring-wrap">
      <div class="ring">
        <div class="el">q</div>
      </div>
    </div>
  </div>
</section>

SCSS

$numRings: 100;
$start: 50px;
$end: $start + 250px;
$pulseDur: 1.5;
// $color1: mix(saturate(lighten(red, 30%), 40%), blue, 40%);
$color1: mix(saturate(lighten(red, 30%), 40%), blue, 40%);
$color2: saturate(lighten(cyan, 20%), 10%);
$dot-size: 0;
$ease: ease-in-out;

@function randomNum($min, $max) {
  $rand: random();
  $randomNum: $min + floor($rand * (($max - $min) + 1));
  @return $randomNum;
}

html, body {
    font-family: "Helvetica", "Arial", san-serif;
    // font-family: "source-code", "Arial", san-serif;
    color: white;
    background: black;    
}

section {
    width: 100vw;
    height: 100vh;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 400px;
    transform: translate3d(0,0,0);
}
.wrapper {
    $size: 30vw;
    width: $size;
    height: $size;
    position: relative;
    transform-style: preserve-3d;
    animation: orbit 30s linear infinite;
    will-change: transform;
}
.ring-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    // background: rgba(red, .3);
    border-radius: 100%;
    
    @for $i from 1 through $numRings {
        &:nth-child(#{$i*1}) {
            will-change: transform;
            transform: rotateX(360/$numRings*$i*1deg);
            transform: rotateZ( randomNum(0, 360)*1deg ) rotateX( randomNum(0, 360)*1deg ) rotateY( randomNum(0, 360)*1deg );
            
            .el {
                $delaySetting: ($pulseDur * .002) * $i + s;
                animation-delay: $delaySetting, $delaySetting;
                animation-fill-mode: both;
                font-weight: bold;
                font-size: 3vw;
                font-size: randomNum(2, 2.5)*1vw + randomNum(1, 10)*.01;
                // font-size: 2vw;
                text-transform: uppercase;
                // &:nth-child(even) {
                //     animation-delay: ($pulseDur * .0025) * $i + 1.5s, ($pulseDur * .0025) * $i + 1.5s;                
                // }
                // animation-duration: 10/$i*10s + 2s;
            }
        }
    }
}
.ring {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.el {
        // mix-blend-mode: screen;
        will-change: transform;
        width: $dot-size;
        height: $dot-size;
        border-radius: 100%;
        // background: white;
        transition: transform .5s ease-in-out;
        transform: translateZ($start);    
        animation: pulse $pulseDur + s $ease infinite, fadeMe $pulseDur + s $ease infinite;
        animation-fill-mode: both, both;
}

// .wrapper:active .el {
//     animation: pulse 2s ease-in-out infinite;
// }

@keyframes orbit {
    0%   {transform: rotateX(0deg)    rotateY(0deg)   }
    100% {transform: rotateX(360deg)  rotateY(360deg) }
}
@keyframes pulse {
    0%    {transform: translateZ($start); color: $color2, 20%; }
    20%   {color: $color2 }
    50%   {transform: translateZ($end); color: $color1;}
    100%  {transform: translateZ($end); color: $color1;}
}
@keyframes fadeMe {
    0%     {opacity: 0}
    5%     {opacity: 1}
    40%    {opacity: 1}
    55%    {opacity: 0}
    100%   {opacity: 0}
}
Ссылки
https://codepen.io/ryankbrown/pen/PxgZzj

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи

Border-radius — площадка для тестов
Codepen
Космический загрузчик
Codepen
Адаптивное здание на CSS
Codepen
SVG маска для фонового изображения
Codepen
Сатурн вращает хулахуп
Codepen