Jak kodować efekty inteligentnego tekstu z CSS

Feb 2, 2026
Jak
Image: Middle Child
[Zdjęcie: Środkowe dziecko]

Rollover Links to świetny sposób na uwikłanie uwagi użytkownika, zwłaszcza jeśli robią coś niezwykłego lub oryginalnego. Środkowe dziecko ma świetny efekt, rzadko widziany gdzie indziej, który rejestruje każdą literę i rozdzieli je z animacją, która kopnięta, gdy odwiedzający unosi się na słowie. Animacja pomaga przekazać figlarny charakter marki kanapki.

W tym artykule pokazujemy, jak odtworzyć efekt na swojej stronie. Aby uzyskać więcej inspiracji, spójrz na nasz przewodnik po Najlepsze przykłady animacji CSS (z instrukcjami, jak je kodować). Za coś innego, spróbuj top Kreator strony internetowej lub nasz wybór najlepszych magazyn w chmurze . A jeśli robisz swoją witrynę bardziej złożoną, upewnij się, że jesteś hosting jest w punkcie.

01. Efekt tekstu Rollover

Jednym z najlepszych efektów tekstowych na stronie środkowej dziecięcej jest dla efektów rollover w menu, gdzie litery rozdzielają się na tekście i obracają się lekko. Uruchom to za pomocą prostych znaczników HTML.

02. Utwórz CSS.

Użyj oddzielnego pliku CSS lub stylu, aby dodać następujące zasady CSS i sprawić, aby strona wypełni pełny rozmiar przeglądarki, zapewniając organizm i opakowanie podjąć pełną wysokość dostępną. 

 Ciało {
Szerokość: 100%;
Wysokość: 100%;
Marża: 0;
Wyściółka: 0;
}
.wrapper {
Wyświetlacz: siatka;
Wysokość: 100%;
}

03. Ustaw słowo

The. słowo Centra klasy Słowo w siatce. Dowolny tekst, który otrzymuje słowo Klasa może to zastosować. The. w górę Klasa zostanie zastosowana do każdego innego litery, a te poruszają się w górę. 

 .word {
rozmiar czcionki: 3em;
Marża: Auto Auto;
}

.word .Up.up.
{
Wyświetlacz: blok inline;
Transform: Translate3d (0PX, 0PX, 0PX)
Obróć (0deg);
przejście: wszystkie 0,5s łatwościowe;
}

04. W górę i więcej

Teraz na dół Klasa akcji bardzo podobnych ustawień do w górę Ale Hover pokazuje ruch w górę dla w górę Rollover. W górę jest również nieznacznie obrócony, aby zwiększyć wygląd. 

 .word .down
{
Wyświetlacz: blok inline;
Transform: Translate3d (0PX, 0PX, 0PX)
Obróć (0deg);
przejście: wszystkie 0,5s łatwościowe;
}

.word: Hover .UP
{
Transform: Translate3d (0px, -8px, 0px)
obrócić (12deg);
Kolor: # 058B05
}

05. Unoszący się w dół

Gdy użytkownik unosi się nad tekstem, klasa Down przesuwa tekst w dół. Później w JavaScript tekst zostanie podzielony na oddzielne rozpiętości z klasami dodawanymi automatycznie na alternatywne rozpiętość. 

 .Word: Hover .down {
Transform: Translate3d (0px, 8px, 0px)
obrócić (-12deg);
kolor: # 058B05;
}

06. Automatycznie dla osób

To trochę kłopotów musi umieścić każdą literę w alternatywnych rozpiętościach z różnymi klasami, więc zautomatyzujemy proces, otrzymując JavaScript, aby zapytać wybierak i zabrać każdą literę. Tutaj str. Zmienna chwyta bieżącą literę, gdy pętla się przez tekst. 

 Skrypt i GT;
var Elements = Document.QuerySelecorallall
('.słowo');
dla (var i = 0, l = elementy. Długość; ja
& lt; l; i ++) {
Var Str = Elements [I] .TextContent;
Elementy [i] .innerhtml = '';

07. Dodaj klas przemiennych

Teraz kolejna pętla umieszcza każdą literę w swoim elemencie obejmującym i dodaje w górę lub na dół klasa do rozpiętości. Jeśli spojrzysz na to w przeglądarce zobaczysz tekst podziału przez każdą literę w górę iw dół, obracając się lekko.

Możesz zobaczyć efekt działania na temat Środkowa strona internetowa . 

 Dla (var j = 0, ll = str.lgength; j
& lt; ll; j ++) {
var spn = dokument.Createelement ("span");
Elementy [I] .appendChild (SPN);
spn.textcontent = str [j];
Niech pos = (j% 2)? 'Góra dół';
SPN.Classlist.add (POS);
}
 }
& lt; / script & gt;

Ten artykuł został pierwotnie opublikowany w magazynie kreatywnego projektowania stron internetowych Projektant stron internetowych . Kup problem 286. lub Subskrybuj .

Czytaj więcej:

  • Dodaj filtry SVG z CSS
  • Jak zaprojektować z kształtami CSS: wprowadzenie
  • 5 fajnych generatorów sieci CSS

Jak - Najpopularniejsze artykuły

Utwórz własną szczotkę kaligraficzną w programie Illustrator

Jak Feb 2, 2026

Jedną z najlepszych rzeczy na temat Illustratora jest możliwość tworzenia własnych szczotek. Możesz znaleźć niesamowite d..

Jak szybko szkicować ręce

Jak Feb 2, 2026

Aby narysować ręce, musisz obejrzeć złożoność anatomii ręki i rozpoznać proste zasady, które pomogą Ci wyciągnąć z ..

Jak przynieść znak 2D do życia w VR

Jak Feb 2, 2026

Jeśli przestrzegasz trendów, trudno przegapić, że VR przechodzi przez kolejne odrodzenie. Stało się wcześniej, ale tym raz..

Jak utworzyć animowany efekt pisania

Jak Feb 2, 2026

Kiedy używany dobrze, Animacja CSS. może dodać zainteresowanie i osobowość do swojej witryny. W tym artykule przejdziemy przez to, jak stworzyć a..

Jak zrobić ogromne eksplozje z V-Ray

Jak Feb 2, 2026

Tworzenie i kompozycję eksplozji 3D jest zazwyczaj zadaniem dla dwóch różnych artystów lub działów studyjnych, ale tutaj r..

Jak tworzyć włosy w kinie 4d ​​

Jak Feb 2, 2026

Zainspirowany fantastyczną sztuką Carlos Ortega Elizalde i Lois Van Baarle, postanowiłem spróbować ręki w tworzeniu postaci..

Sekrety spełnienia kreatywnego projektu krótkie

Jak Feb 2, 2026

Jeden z moich opiekunów powiedział mi kiedyś, że jeśli został zamknięty w więzieniu za resztę swojego życia, z niczym tylko długopisem i papierem, nie napisałby rzeczy, oprócz "g..

Boost D3.js wykresy z gradientami SVG

Jak Feb 2, 2026

Nadieh Bremer będzie Generować Londyn We wrześniu, gdzie będzie wykazać, jak wziąć..

Kategorie