Animacje obramowania CSS

Różne sposoby animowania obramowania w CSS

Bramus

Ustawianie obramowania

Obramowanie elementu można ustawić na kilka sposobów: border, outline i box-shadow. Zgodnie z opisem w artykule The 3 CSS Methods for Using Element Borders Stephanie Eckles, każde z tych rozwiązań ma swoje zalety i wady, zwłaszcza jeśli chodzi o animowanie granic. Główną przyczyną nieużywania odpowiedniego elementu border CSS jest tworzenie animacji.

Border Animations with outline-offset by Kevin J. Powella

Ostatnio zwrócił moją uwagę na artykuł Fantastyczna animacja obramowania CSS, w której autor Coco badał więcej opcji. Wstrzyknięcie wygenerowanej treści za pomocą elementów ::before i ::after powoduje utworzenie sztucznego obramowania, które jest następnie animowane.

Najbardziej wyróżniają się powiązane z nim animowane wizualizacje wykorzystane w artykule. Dzięki nim można dokładnie wyjaśnić, co się robi, aby uzyskać pożądany efekt.

Animacje obramowania z wykorzystaniem treści wygenerowanych przez Coco

Wygenerowaną treść stanowi zarówno warstwa biała, jak i kolorowe linie. Rozjaśniając białą warstwę do przodu i z niej staje się jasne, w jaki sposób się łączą i jak działa animacja.

Zachowywanie modelu pudełka

Wadą wykorzystania wygenerowanych treści do imitowania obramowania jest uszkodzenie modelu ramki. Treści mogą teraz zasłonić sztuczną ramkę, bo pod spodem jest namalowana „obramowanie”. Aby zniwelować, musisz zastosować żądane border-width jako padding.

Aby uzyskać prawdziwe obramowanie, a tym samym zachować działanie modelu ramki, możesz użyć wielu teł, które rozciąga się następnie na cały obszar.

Podstawy

Zacznijmy od utworzenia ramki przerywanej i dodania wielu tła.

/* 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
  )
;

Wybieram rozmiar tła za pomocą background-origin

Jak widać, z tłem coś zabawnego dzieje się – są pomalowane w obramowanie, ale tekst conic-gradient wydaje się być niewłaściwy. To jest faktycznie zamierzone działanie: domyślnie obrazy tła nie są wyświetlane w obramowaniu, ponieważ ich źródłem jest padding-box elementu. Aby utworzyć obramowanie, ustawione obrazy tła powtarzają się w samym obramowaniu, co daje dziwny efekt wizualny.

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

Obsługa przeglądarek

  • 1
  • 12
  • 4
  • 3

Źródło

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;

Teraz wszystko wygląda lepiej:

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

Tło zajmuje teraz całą przestrzeń, dlatego trzeba ponownie zmniejszyć półprzezroczystą warstwa. Zamiast znów przeglądać background-size, możesz to zrobić na łatwiejszy sposób: użyj background-clip i ustaw jego wartość padding-box. Dzięki temu tło nie będzie już rysowane poniżej obszaru obramowania.

Obsługa przeglądarek

  • 1
  • 12
  • 4
  • 5

Źródło

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

Na koniec zmień 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 niezwykle proste w przeglądarkach, które ją obsługują:

Obsługa przeglądarek

  • 85
  • 85
  • 16.4

Źródło

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

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

Łącznie daje to następujący kod:

Dodatkowa treść: border-image

Omówionym wcześniej sposobem rysowania obramowania w postaci gradientu jest użycie arkusza CSS border-image.

Obsługa przeglądarek

  • 16
  • 12
  • 15
  • 6

Źródło

Pozwalają na użycie prostszego kodu, który eliminuje konieczność zajmowania się pokrywającymi się tłami. Animację można zastosować w taki sam sposób jak poprzednio.

/* 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
;

Możesz jednak zauważyć kilka rzeczy, które przestaną działać w ramach tego podejścia:

  • border-image nie nabiega po border-radius; zawsze pozostanie prostokątny.
  • Gdy ustawiasz wypełnienie w polu border-image-slice, element border-image nie jest malowany poniżej zestawu background, lecz na górze. Może to być kłopotliwe, jeśli tło ma być półprzezroczyste.

Zamykam

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