Jak animować przerywaną ramkę za pomocą CSS
Dekorowane obramowania mogą ozdobić dowolny element na stronie, ale granice CSS są ograniczone, jeśli chodzi o styl. Programiści często wymyślają takie rozwiązania, jak granice gradientu CSS, obramowania SVG, wiele granic i wiele innych, aby naśladować i ulepszać wygląd ramek i animacji.
Dzisiaj przyjrzymy się prostszemu hackowi dla przerywanych granic: przerywanej animacji granicznej. Animowana przerywana ramka zostanie utworzona tylko przy użyciu zarys i box-shadow, nie zostawiając zamieszania na temat wad, ponieważ zarys jest obsługiwany od wersji IE8. W ten sposób użytkownik nadal będzie mógł zobaczyć obramowanie w przeciwieństwie do sytuacji, gdy używany jest SVG lub gradient. Dzięki temu możesz również tworzyć dwukolorowe myślniki. Spójrzmy.
Tworzenie granic
Najpierw stworzymy granice. W tym celu użyjemy kreskowanego konturu i cienia pudełka.
.banery konspekt: 6px przerywany żółty; box-shadow: 0 0 0 6px # EA3556;…
The zarys będzie potrzebował wszystkich jego wartości; szerokość, typ i kolor. The box-shadow potrzebuje tylko wartości rozpiętość który powinien być taki sam jak szerokość konturu i jego kolor. Zarówno kontur, jak i cień pudełka razem tworzą efekt dwukolorowych kresek.
Następnie możesz dostosować szerokość lub wysokość pola, aby uzyskać pożądany wygląd obramowania w rogach.
Animowanie granic
W naszym pierwszym przykładzie animacji dodamy animacje klatek kluczowych CSS do zestawu banerów z obramowaniami animującymi w sposób ciągły, zyskując uwagę. Dla efektu animacji po prostu zamieniamy kolory konturu i cienia pudełka.
@keyframes animateBorder to outline-color: # EA3556; box-shadow: 0 0 0 6px żółty;
Możesz wybrać kolor konturu za pomocą kolor konturu właściwość longhand, jednak w przypadku cienia skrzynkowego musisz na razie nadać wszystkie wartości skróconej właściwości.
Gdy animacja jest gotowa, dodaj ją do pola.
.banery konspekt: 6px przerywany żółty; box-shadow: 0 0 0 6px # EA3556; animacja: 1s animuje nieskończoność:…
Przejścia na granicy
Dla przykładu przejścia dodamy obramowanie do zdjęć i ożywiamy je w dymku. Możesz również zmienić rozmiar obramowania dla różnych efektów.
.zdjęcia zarys: 20px przerywana # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; przejście: wszystkie 1s;… .photos: hover outline-color: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5;
Teraz najedź myszką na te obrazy, aby zobaczyć swoje przerywane granice CSS w całej swojej animowanej chwale.
I to jest okład. Możesz spróbować zastąpić przerywane granice przerywanymi, ale efekt może nie być tak dobry. Możesz także zmienić typ konturu podczas animacji, aby uzyskać więcej efektów.
