Динамічні лого з допомогою CSS

Анімований логотип використовується, щоб більш широко описати сферу діяльності, а ще це просто гарно виглядає!

Можна зробити це з допомогою анімування SVG, але в цьому прикладі ми використаємо CSS. Слід зазначити, що приклади CSS будуть без префіксів браузера. (Рекомендую використовувати autoprefixer).

Починаємо

Для початку нам потрібна базова розмітка. Використаймо ненумерованний список пелюсток (petals):

    <ul class="petals">
        <li></li>
        <li></li>
        <li></li>
    </ul>

Кожен елемент пелюстка li може бути вибраний з допомогою CSS nth- child.

Перша пелюстка

Пелюстка - це квадратний елемент з границею та радіусом границі, щоб створити ідеальний коло. Анімуємо стилі, щоб зробити це більш очевидним:

    .petals li{
        height: 100px;
        width: 100px;
    
        border: 7px solid red;
        border-radius: 50%;
    }

Створюємо троянду

Переміщаємо кожну пелюстку, використовуючи transform: translate(x, y). Вказуємо абсолютне позиціонування, щоб вони перекривали одна одну.

    .petals li:nth-child(1){
        transform: translate(33.33%, 0);
    }
    
    .petals li:nth-child(2){
        transform: translate(0, 16.66%);
    }
    
    .petals li:nth-child(3){
        transform: translate(33.33%, 33.33%);
    }

Анімуємо пелюстки

Тепер, коли ми маємо первинне розміщення, можемо анімувати їх, щоб створити ефект кружляння, кожна пелюстка рухається до позиції проти годинникової стрілки.

    .petals li{
        height: 100px;
        width: 100px;
    
        border: 7px solid red;
        border-radius: 50%;
        
        animation: .5s infinite alternate ease-in-out;
    }
    
    .petals li:nth-child(1){
        transform: translate(33.33%, 0);
        animation-name: petal-1;
    }
    
    .petals li:nth-child(2){
        transform: translate(0, 16.66%);
        animation-name: petal-2;
    }
    
    .petals li:nth-child(3){
        transform: translate(33.33%, 33.33%);
        animation-name: petal-3;
    }
        
    /* each petal has a respective animation */
    
    @keyframes petal-1{
        to{ transform: translate(0, 16.66%); }
    }
    
    @keyframes petal-2{
        to{ transform: translate(33.33%, 33.33%); }
    }
    
    @keyframes petal-3{
        to{ transform: translate(33.33%, 0); }
    }

SASS для більшого контролю

Все це створено вручну, тож не є ідеальним. Якщо ми хочемо надати гнучкості та отримати більший контроль над розміром логотипу і його поведінкою, можна використати SASS, пре-процесор для CSS.

Це буде виглядати приблизно так:

    $petalSize: 100px;
    $petalThickness: ($petalSize * 0.07);
    $petalColour: #C43200;
    $spinSpeed: .5s;
    
    .petals li{
        position: absolute;
      
        height: $petalSize;
        width: $petalSize;
    
        border: $petalThickness solid $petalColour;
        border-radius: 50%;
      
        animation: $spinSpeed; infinite alternate ease-in-out;
    }
    
    $position:(
        translate($petalSize / 3, 0),
        translate(0, $petalSize / 6),
        translate($petalSize / 3, $petalSize / 3)
      );
    
    @for $i from 1 to length($position) + 1{
      
      .petals li:nth-child(#{$i}){
        transform: nth($position, $i);
        animation-name: petal-#{$i};
      }
    
      $j: $i - 1;
      @if $j == 0 { $j: 3; }
    
      @keyframes petal-#{$i}{ to{ transform: nth($position, $j) } }
    }