Het maken van een geanimeerd teksteffect met CSS vereist kennis van zowel HTML als CSS. Hier is een basisvoorbeeld van een geanimeerd teksteffect dat een tekst van links naar rechts in uw browservenster laat glijden:
1. Eerst moet je het HTML-element maken dat het geanimeerde teksteffect ontvangt. In dit geval gebruiken we een div-element met de id “animated-text”:
\`\`\`html1. Vervolgens moet je de CSS-regels maken die de elementen in de HTML-pagina stileren. Voor het geanimeerde teksteffect moeten we CSS-animatieregels gebruiken:
\`\`\`css #animated-text { font-size: 2em; /_ Verander dit om de grootte van de tekst te wijzigen_/ width: fit-content; position: absolute; left: 0; animation: slide 5s infinite; /_ De animatienaam, die overeenkomt met de @keyframes minder hieronder, de duur van de animatie, en de instructie voor de animatie om te blijven herhalen _/ } @keyframes slide { 0% { left: 0; } /_ Start van de animatie _/ 100% { left: 100%; } /_ Einde van de animatie, de tekst is verplaatst naar het einde van het browservenster _/ } \`\`\`De bovenstaande code creëert een “Hallo Wereld” tekst die continu van links naar rechts over het browservenster glijdt.
Let op: De animatie kan anders gedragen op verschillende browsers. Zorg ervoor dat je je animaties test op alle browsers waarvan je verwacht dat je publiek hen zal gebruiken.
