Простые волшебные вещи

Мне хотелось сделать эффект расходящихся лучей на чистом CSS, без картинок.

Ниже можно увидеть что у меня получилось:

Коды с объяснениями и подсказки не выкладываю намеренно, чтобы не портить радость открытия тем, кто захочет это повторить не поглядывая в исходники, которые, впрочем, легко можно раздобыть из примеров.

По-моему, очень красивый эффект, хотя и имеет некоторые ограничения.

P.S.:

  1. Очень неплохо ест ресурсы компа.
  2. Лучше всего выглядит в браузерах на Webkit, к Firefox'у большие вопросы.

Upd. от 5.07.2020: подобные лучи без проблем можно сделать в SVG используя фигуру с очень толстой пунктирной обводкой либо с помощью конических градиентов, но у них в данный момент недостаточная поддержка браузерами.

Полезное про анимацию и эффектыJsBin или Codepen?
Наверх