Несколько месяцев назад в Reddit появилась небольшая забавная проблема. Я дал ему шанс, но я подумал, что было бы забавно передать его читателям SitePoint и фокусникам CSS, чтобы посмотреть, что вы можете придумать.
Есть как минимум 4 подхода, которые я могу придумать, но может быть и больше.
Единственный приз — это слава, демонстрирующая всем величие ваших навыков CSS.
Соревнование
Ваша задача — если вы примете это — воспроизвести этот анимированный GIF в HTML и CSS.
Как вы можете видеть, это цикличная анимация — возможно, вращающаяся загрузка — которая переходит от красного круга к зеленому квадрату в синий треугольник. Вы также заметите, что форма вращается по часовой стрелке каждый раз, когда она меняется.
Я настроил его как базовый CodePen, который вы можете использовать в качестве отправной точки . Я вставил оригинальный GIF, чтобы вы могли видеть, над чем вы работаете.
Правила
- Здесь нет жестких и быстрых правил. Если вы хотите использовать VRML на основе JavaScript, сделайте это! Граница-радиус, SVG, холст, что угодно.
- ОДНАКО: знайте, что простота и элегантность — король. Эффективное, близкое приближение GIF, выполненное в 10 строках кода, вероятно, будет рассматриваться как лучшее решение, чем «идеальное по пикселям» решение, которое использует 100 строк. 10-строчное решение, превосходное по пикселям, превосходит все.
- HTML это один DIV. Вам нужно убедить нас, что у вас была очень веская причина изменить это.
- Не стесняйтесь использовать любые функции, предоставляемые Codepen, включая Sass, Prefixfree.
- Обратная совместимость браузера будет оценена по достоинству, но это не главное в наших критериях
Представьте свои решения в виде ссылок CodePen, размещенных в комментариях ниже. У вас есть неделя, чтобы представить свои лучшие идеи.
Ваше время начинается …
Сейчас.
PS Следите за будущими проблемами — я имею в виду несколько других.
ОБНОВИТЬ:
Мы посмотрели на то, что считали лучшими ответами, и выбрали нашего любимого здесь .