Przesunięcie CSS
Przykład 01: Offset-Outline
Aby użyć właściwości Ofline Offset, aby zapewnić przejrzystą przestrzeń między granicą elementu i jej zarysem, musimy utworzyć sekcję „Div” na stronie internetowej. Ten kod zaczęliśmy za pomocą znacznika HTML i zakończyliśmy go znacznikiem zamykania HTML. W obrębie znacznika ciała używamy znacznika „div” do utworzenia sekcji na stronie HTML. Ten znacznik „Div” zawiera tylko prosty nagłówek lub zdanie z trzema słowami i został zamknięty z przerwą linii dodaną przez znacznik linii przerwy „
".
W tagu „Head” tego kodu HTML, pisaliśmy tę stronę internetową do „Zarysu” i używania znacznika „Style” do stylizowania sekcji „Div” naszej strony HTML. Dodaliśmy 10 pikseli marginesów dla sekcji „Div” wraz z 5-pikselową solidną granicą szkarłatną. Kolor tła dla tej sekcji „div” byłby „aqua”, a zarys byłby 4-pikselowy kolor przerywany. Korzystaliśmy również z właściwości „Ofline Offset”, aby dać 15-pikselową lukę między granicą sekcji „Div” a jej zarysem. Zapiszmy ten kod i uruchom go z menu „Uruchom” kodu Visual Studio.
Po pomyślnym wykonaniu tego kodu w przeglądarce Chrome, mamy poniższe dane wyjściowe strony HTML. Oto wyraźna luka między 5-pikselową granicą Crimson 5-pikselową tag. Możesz zobaczyć, że przestrzeń nie ma koloru.
Przykład 02: pozycja przesunięcia
Tutaj jest używanie właściwości położenia przesunięcia CSS do określania pozycji początkowej dowolnego elementu strony internetowej HTML. Zacznijmy od użycia tagów otwierających i zamykania HTML. W ramach tego tagu używamy tagów ciała i głowy. Znacznik ciała zawiera proste 2 nagłówki rozmiaru 2 z różnymi tytułami. Następnie użyto dwóch tagów „div”. Zewnętrzny znacznik „div” został określony za pomocą identyfikatora „A”, podczas gdy jego wewnętrzny znacznik „div” został określony z identyfikatorem „B” dla różnicowania w stylizacji.
„Div” i znaczniki ciała są tutaj zamknięte. W tagu „Head” używamy tagu tytułowego do tytułu tej strony internetowej HTML i stylu, aby dodać styl do ciała naszej strony internetowej. Używamy „#A” do stylizacji zewnętrznego znacznika „div” za pomocą jego id „A”. Pozycja przesunięcia dla tej sekcji „Div” została określona z wartością „względną”. Jego szerokość i wysokość byłyby określone jako 200px z 5px Solid Crimson Kolor wokół tego „Div”. Pozycja wewnętrznego znacznika „div” została ustawiona na absolutne, co jest związane z sąsiednim elementem. Szerokość i wysokość dla wewnętrznej sekcji „Div” są ustawione na 75 piksel z szkarłatną granicą 5px stałego.
Górna i lewa przestrzeń lub wyściółka została zdefiniowana w stosunku do sekcji zewnętrznej dla tego „Div”: TOP: 180px i lewy: 7px. Nasz kod jest teraz gotowy do wykonania w przeglądarce.
Zastosowanie „względnej” wartości dla właściwości pozycji przesunięcia umieszcza zewnętrzną sekcję „Div” w stosunku do innych elementów naszej strony HTML. Podczas gdy użycie „bezwzględnej” wartości pozycji wraz z ustawieniem górnej i lewej wyściółki umieszcza wewnętrzną „div” na środku zewnętrznej sekcji „Div”.
Przykład 03: Ancarcor offset-ścieżka i przesunięcia
Spróbujmy użyć właściwości Offset-Anghor i Offset Path, aby stworzyć animację na stronie internetowej HTML. Ten sam tytuł został nadany tej stronie internetowej. W obrębie znacznika nadwozia używamy tagów trzech sekcji do tworzenia różnych sekcji na stronie internetowej, a następnie tagów „div”, aby je odróżnić. Wszystkie trzy tagi „div” zawierają jeden tekst i zostały określone z trzema różnymi klasami: A, B i C. Główną częścią tego kodu HTML jest jego styl, który zawiera wiele właściwości CSS, aby animować trzy tagi. Wszystkie trzy tagi „div” zawierają właściwość ścieżki przesunięcia, aby poruszać się po zdefiniowanej ścieżce, aby nie był tak liniowy. Szerokość i wysokość wszystkich trzech elementów Div wynosiłaby odpowiednio 100 i 30 pikseli. Animacja została ustawiona na przeniesienie elementów Div wraz z prędkością 3000 milisekund bez zatrzymywania. W ten sposób używany jest nieskończony atrybut. Oto element sekcji do stylizacji. Jego obraz tła byłby gradientem liniowym i byłby 49 procent przezroczysty od górnej, 50 procent czarnych od lewej, prawej i środkowej, a 62 procent przezroczystych od dołu. Również każda sekcja zawierałaby 2-pikselową stałą granicę i 10 pikseli marginesów od dołu.
Właściwość Offset-Anchor została wykorzystana do określenia punktu w elemencie „Div” do podróżowania wzdłuż ścieżki, która została ustalona za pomocą właściwości „ścieżki przesunięcia” w głównej stylizacji „Div”. Oznacza to, że punktem „div” elementu byłby poruszanie się na konkretnej nieliniowej ścieżce na naszym ekranie strony internetowej. Ustawiono różne kolory tła dla tych elementów „div”, kolor tekstu i wyrównanie tekstu dla tych elementów. Zapiszmy i uruchommy ten kod, aby zobaczyć zmiany.
Wszystkie trzy elementy DIV poruszają się wzdłuż nieliniowej ścieżki nie-prostopadłej w trzech różnych sekcjach, jak pokazano poniżej. Te trzy elementy są oznaczone jako jeden, dwa i trzy; Przechodząc od lewej na prawą od ekranu.
Zaktualizowaliśmy kod i zastosowaliśmy różne wartości właściwości Offset-Path w stylu tego kodu HTML. Ta ścieżka sprawiłaby, że nasze elementy div poruszają się w ruchu zygzakowatego. Ponadto zaktualizowaliśmy wysokość i szerokość tych sekcji DIV do 40 pikseli. Odległość ruchu jest również dodawana, gdy reszta pozostaje niezmieniona.
Wyjście tego zaktualizowanego kodu pokazuje nam trzy małe elementy Div z zygzakiem wzdłuż każdej z ich sekcji.
Wniosek
Ten artykuł dotyczy użycia różnych właściwości przesunięcia do stylu i animacji różnych elementów strony internetowej HTML. Podaliśmy przykład za pomocą właściwości Offet-Outline do dodania przestrzeni między granicą a zarysem określonego elementu. Kolejny przykład jest używany do wykazania zastosowania właściwości pozycji przesunięcia do ustawienia określonego elementu w stosunku do innych elementów w ciele. Próbowaliśmy również animować i przenieść elementy HTML na ekranie przeglądarki na jakiejś konkretnej ścieżce za pomocą właściwości przesunięcia i ścieżki przesunięcia.