Animacje obramowania CSS

Przegląd kilku sposobów animowania obramowania w CSS

Bramus

Ustawianie obramowania

Istnieje kilka metod ustawiania obramowania elementu: border, outline i box-shadow. Jak opisano w artykule The 3 CSS Methods for Adding Element Borders (3 metody CSS dodawania obramowań elementów) autorstwa Stephanie Eckles, każde podejście ma swoje zalety i wady, zwłaszcza jeśli chodzi o animowanie obramowań. Głównym powodem, dla którego nie używa się właściwej właściwości CSS border, jest animacja.

Animacje obramowania za pomocą outline-offset, Kevin J. Powell

Artykuł, który niedawno przykuł moją uwagę, to Fantastyczna animacja obramowania CSS, w którym autor Coco omawia więcej opcji. Wstrzykując wygenerowaną treść za pomocą ::before i ::after, tworzą sztuczną ramkę, która jest następnie animowana.

Najbardziej wyróżniają się dla mnie animowane wizualizacje, które zostały użyte w artykule. Pomagają one wyjaśnić, co dokładnie jest robione, aby osiągnąć pożądany efekt.

Animacje obramowania z wykorzystaniem wygenerowanych treści autorstwa Coco

Zarówno biała warstwa, jak i kolorowe linie to wygenerowane treści. Przez stopniowe pojawianie się i znikanie białej warstwy widać, jak są one ułożone i jak działa animacja.

Zachowanie modelu pudełkowego

Wadą używania wygenerowanej zawartości do imitowania obramowania jest to, że otrzymujesz uszkodzony model pudełkowy: zawartość może teraz zasłaniać sztuczne obramowanie, ponieważ wspomniane „obramowanie” jest namalowane pod spodem. Aby rozwiązać ten problem, musisz zastosować odpowiedni border-width jako padding.

Aby uzyskać prawdziwe obramowanie i zachować działanie modelu pudełkowego, możesz użyć wielu teł, które następnie rozciągniesz na obszar obramowania.

Podstawy

Zacznijmy od utworzenia kropkowanego obramowania i dodania wielu teł.

/* Size of the border */
--border-size: 0.5rem;

/* Create a dotted border */
border: var(--border-size) dotted lime;

/* Create two background layers:
   1. A white semi-transparent
   2. A layer with the colored boxes
 */
background-image:
  linear-gradient(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),

  conic-gradient(
    from 45deg,
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  )
;

Dostosowywanie rozmiaru tła za pomocą background-origin

Jak widać, z tłami dzieje się coś dziwnego: są namalowane w obramowaniu, ale conic-gradient wydaje się nieprawidłowe. Jest to zamierzone działanie: domyślnie obrazy tła nie są rysowane w obramowaniu, ponieważ ich początkiem jest padding-box elementu. Aby utworzyć obramowanie, ustawione obrazy tła są powtarzane w samym obramowaniu, co daje dziwny efekt wizualny.

Aby rozwiązać ten problem, musisz rozciągnąć tło, tak aby zajmowało również rozmiar obramowania. Możesz to zrobić ręcznie, rozciągając tło i zmieniając jego położenie, ale najlepiej jest użyć właściwości background-origin, aby dopasować rozmiar tła do elementu border-box.

Browser Support

• 1
• 12
• 4
• 3

Source

Nie

/* Manually add or offset the size of the border where needed */
background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);

Tak

background-origin: border-box;

Ten jeden dodatek sprawia, że wszystko wygląda o wiele lepiej:

Zmniejszanie białej warstwy tła za pomocą background-clip

Tła zajmują teraz całą przestrzeń, więc półprzezroczystą warstwę trzeba ponownie zmniejszyć. Zamiast ponownie modyfikować background-size, możesz użyć prostszego sposobu: użyj background-clip i ustaw wartość padding-box. Dzięki temu tło nie będzie już rysowane pod obszarem obramowania.

Browser Support

• 1
• 12
• 4
• 5

Source

background-clip:
  padding-box, /* Clip white semi-transparent to the padding-box */
  border-box /* Clip colored boxes to the border-box (default) */
;

Na koniec ustaw obramowanie na transparent, aby uzyskać pełny efekt.

border: 0.3rem dotted transparent;

Animacja

Aby przywrócić animację obramowania, możesz zmienić kąt początkowy elementu conic-gradient.

--angle: 0deg;
conic-gradient(
  from var(--angle),
  #d53e33 0deg 90deg,
  #fbb300 90deg 180deg,
  #377af5 180deg 270deg,
  #399953 270deg 360deg
);

Dzięki @property jest to bardzo proste w przeglądarkach, które obsługują tę regułę:

Browser Support

• 85
• 85
• 128
• 16.4

Source

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

Po połączeniu wszystkich elementów kod wygląda tak:

Treści bonusowe: border-image

Wcześniej omówionym sposobem na narysowanie obramowania gradientowego jest użycie właściwości CSS border-image.

Browser Support

• 16
• 12
• 15
• 6

Source

Umożliwia to uproszczenie kodu, ponieważ nie musisz zajmować się nakładającymi się tłami. Animację można zastosować w taki sam sposób jak wcześniej.

/* Create a border */
border: 0.5rem solid transparent;

/* Paint an image in the border */
border-image:
  conic-gradient(
    from var(--angle),
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  ) 1
;

Zauważysz jednak, że w tym przypadku kilka rzeczy nie działa:

• border-image nie podąża za border-radius i zawsze pozostaje prostokątny.
• Gdy ustawisz border-image-slice na wypełnienie, border-image nie jest rysowany pod ustawionym background, ale na nim. Może to być problematyczne, jeśli chcesz, aby tło było półprzezroczyste.

Podsumowanie

Istnieje wiele możliwości animowania obramowań w CSS. W zależności od przypadku użycia możesz wybrać jedną z tych opcji.