Простые волшебные вещи
Мне хотелось сделать эффект расходящихся лучей на чистом CSS, без картинок.
Ниже можно увидеть что у меня получилось:
See the Pen Magic Rays (gray) by yoksel (@yoksel) on CodePen.
See the Pen Magic Rays (color) by yoksel (@yoksel) on CodePen.
See the Pen Magic Rays (Icy) by yoksel (@yoksel) on CodePen.
Коды с объяснениями и подсказки не выкладываю намеренно, чтобы не портить радость открытия тем, кто захочет это повторить не поглядывая в исходники, которые, впрочем, легко можно раздобыть из примеров.
По-моему, очень красивый эффект, хотя и имеет некоторые ограничения.
P.S.:
- Очень неплохо ест ресурсы компа.
- Лучше всего выглядит в браузерах на Webkit, к Firefox'у большие вопросы.
Upd. от 5.07.2020: подобные лучи без проблем можно сделать в SVG используя фигуру с очень толстой пунктирной обводкой либо с помощью конических градиентов, но у них в данный момент недостаточная поддержка браузерами.
- Метки:
- эксперименты,
- рамки