Динамічні лого з допомогою 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;
}
// collection of positions
$position:(
    translate($petalSize / 3, 0),
    translate(0, $petalSize / 6),
    translate($petalSize / 3, $petalSize / 3)
  );
// loop through petals
@for $i from 1 to length($position) + 1{
  .petals li:nth-child(#{$i}){
    transform: nth($position, $i);
    animation-name: petal-#{$i};
  }
  // animate petal to previous position
  $j: $i - 1;
  @if $j == 0 { $j: 3; } // loop round array
  // create animation for petal
  @keyframes petal-#{$i}{ to{ transform: nth($position, $j) } }
}

See the Pen ROSE Logo Animation by Zac Colley (@zaccolley) on CodePen.

Джерело