Make accessible text animation with HTML and CSS [no JavaScript]

Опубликовано: 18 Август 2021
на канале: Leanne R

448

In this video, I show you how to create a simple but effective text animation using HTML and CSS - no JavaScript needed! We'll also make sure the text is accessible when read by screen readers, too.

00:37 - the HTML
01:17 - reducing space between the letters with negative letter spacing
01:50 - declaring the animation with @keyframes
02:35 - using the animation
03:40 - making the letters move at different times with animation-delay
and nth-child
04:30 - the finished animation
04:44 - making the text animation accessible to screen readers
--

const me = {
name: "Leanne 👩🏻",
passions: ["coffee☕️", "code 💻", "cats 🐱"],
unpopular_opinion: "LOVES CSS ❤️",
favorite_colors: ["hotpink", "orangered"],
channel_aim: "Show the world that CSS is fun and web development rules! 👑"
}

--

🐤 Say hi on Twitter: / rybaleanne
🤺 Join the Scrimba Weekly Web Dev Challenge: https://scrimba.com/learn/weeklychall...

На этой странице сайта вы можете посмотреть видео онлайн Make accessible text animation with HTML and CSS [no JavaScript] длительностью часов минут секунд в хорошем качестве, которое загрузил пользователь Leanne R 18 Август 2021, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 448 раз и оно понравилось 29 зрителям. Приятного просмотра!

465,056

5.2 тыс