TGViewer
frontips.ru frontips.ru @frontips · 484 subscribers
Post #159 1.01K
Недавно впечатлился вроде бы банальной анимацией - скорость света в реальном времени на примере расстояния между Землёй и Луной (https://youtu.be/LvH2MVI8idw?t=20)

..и конечно же решил сделать подобную анимацию на HTML/CSS

подумал, что начинающим верстальщикам тоже может быть интересным такое простенькое практическое задание (flexbox, animation, position, и css-переменные можно попробовать применить)

если есть желание, ниже условия и некоторые данные:

- сделать анимацию скорости света от Солнца до Земли, и отдельно от Земли до Луны
- используем только HTML и CSS
- масштаб не нужно соблюдать
- время, за которое свет преодолевает расстояние от Солнца до Земли - 500 секунд, от Земли до Луны - 1,255 секунды

..если нет желания, вот ссылка на мой Codepen - https://codepen.io/hqdrone/pen/xxXdrWZ?editors=1100
More from @frontips
  1. Sep 5, 2022Ребят, надеюсь этот канал и мой блог по вёрстке принёс вам пользу Сейчас у меня цель - улу…
  2. Feb 24, 2022https://quickref.me/ - хороший ресурс со шпаргалками для разработчиков
  3. Feb 23, 2022Простенький макет для практики - https://www.figma.com/file/yIl2O1QVhnb1ePo0oJRrgI/Aset---…
  4. Feb 7, 2022Прошлым летом нарисовал простой дизайн макет и предлагал сверстать его в качестве практики…
  5. Feb 6, 2022Нравятся мне заметки от George Moller :) На этот раз примеры применения псевдо-элементов :…
  6. Jan 31, 2022https://12daysofweb.dev/ - 12 качественных статей на тему современного веба: - Intersectio…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →