Speciale effecten van HTML-teksten

Schrijver: Laura McKinney
Datum Van Creatie: 2 April 2021
Updatedatum: 20 November 2024
Anonim
CSS3 Text Distortion Animation Effects | Tricks
Video: CSS3 Text Distortion Animation Effects | Tricks

Inhoud

HTML en CSS kunnen een aantal coole teksteffecten produceren, evenals standaard opmaak, zoals lettergrootte en achtergrondkleur. Speciale effecten in HTML zorgen ervoor dat de tekst verschijnt en zich op ongebruikelijke manieren gedraagt ​​die de aandacht van de kijker trekken. Gebruik ze om een ​​stoppagina te animeren of om eenvoudige tekst toe te voegen.


Speciale effecten van HTML-teksten (Polka Dot RF / Polka Dot / Getty Images)

Drop Cap

In tekstverwerking vergroot een drop-kat de eerste letter van een alinea. U kunt dit effect op uw webpagina's reproduceren met HTML en CSS. Gebruik de eigenschap "float" om de hoofdletter en lettertypegrootte uit te lijnen om de grootte ervan ten opzichte van de rest van de tekst in de alinea te vergroten. Zet de tekens in de "span" -tags.

voorbeeld:

E Dit is een voorbeeld van een drop-capeffect met behulp van de float-eigenschap.

Rollende tekst

Het selectiekadereffect (marge) in HTML zorgt ervoor dat de tekst op verschillende manieren wordt verplaatst. De opdracht "richting" in de code vertelt de browser waar de tekst naartoe gaat: omhoog, omlaag, links of rechts. Het kenmerk "gedrag" beschrijft hoe de tekst wordt verplaatst. Het kenmerk "Bladeren" zorgt ervoor dat de tekst buiten het zichtbare gebied komt en verschijnt vervolgens weer. Met de opdracht "dia's" stopt de tekst aan het einde van de marge, terwijl bij "alternatief" de tekst van links naar rechts wordt verplaatst. Gebruik de opdracht "scrollamount" om de snelheid te bepalen, en hoe hoger het cijfer, hoe sneller het scrollen.


voorbeeld:

De tekst oprollen!

Titel mouseover (mouseover)

Met de HTML-bereikmarkering kan tekst worden weergegeven over het gebied waarin het is ingevoegd. Als u bijvoorbeeld een samenvatting van een alinea wilt toevoegen, voegt u de tekst in met de span-tag.

voorbeeld:

Alineatekst hier.