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

Мне хотелось сделать эффект расходящихся лучей на чистом 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.

Анимация проигрывается один раз, нажмите RERUN в нижнем правом углу, чтобы её повторить, или перейдите к редактированию кода, в редакторе она зациклена.

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

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

P.S.:

  1. Очень неплохо ест ресурсы компа.
  2. Лучше всего выглядит в браузерах на Webkit, к Firefox’у большие вопросы.
Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus