Создание вращающихся лучей с помощью CSS3: Переделка

Вы, наверное, уже встречали статью в этом блоге, посвященную созданию вращающихся лучей с помощью CSS и JavaScript. Теперь пришло время пересмотреть код, сделать его лучше и легче (только под CSS).

Пример

Структура HTML

Структура такая же, как и в прошлом посте:

Один родительский элемент с двумя потомками: лого и контейнер лучей.

CSS

Предыдущая CSS версия вращающихся лучей использовала свойство CSS transforms, но сейчас мы будем использовать @keyframes. Основная идея состоит в том, чтобы с помощью кейфреймов поворачивать лучи командой rotate с 0 deg по 360 deg:

Используя функции animation-timing-function, animation-duration и animation-iteration-count, мы добьемся того, что анимация будет линейной, поступательной и, самое главное, бесконечной!

Также, стоит отметить, что анимация более гладкая, чем при использовании JavaScript. Также есть проблемы с браузером Opera. Браузер не поддерживает @keyframes.

Но, в Опере есть свойство -o-transition. Попробуем сделать анимацию через это свойство.

«Костыли» для Оперы или CSS+JS

Для начала, добавим для элемента DIV с ID #rays следующие строки.

Согласитесь, чем-то напоминает animation. (;

Далее переписываем следующий код

в такой

А теперь JS магия. Дело в том, что -o-transition будет работать только, если у элемента сменится селектор и никак иначе. Поэтому в загрузку страницы вставляем автоматическую смену селектора. Подключаем JS файл в хедере HTML.

и прописываем в тег body запуск этого скрипта.

Исходник файла transitions.js смотрите в примере.

Пример

И так поддерживаемые браузеры:
firefox chrome safari opera


5 комментариев на “Создание вращающихся лучей с помощью CSS3: Переделка

  1. как ни пробовал в опере так и не заработало

    -o-transition: rotate (3600deg);

    стоит последняя версия 11.60

    Thumb up 0 Thumb down 0

    • проверил. действительно в опере не работает.

      чуть позже добавлю рабочий вариант.

      но увы для оперы он будет с костылями)...

      Thumb up 0 Thumb down 0

    • привинтил костыли и исправил пост.

      смотрите пример. теперь в опере все работает.

      Thumb up 0 Thumb down 0

  2. с js уже не то, тогда уж проще на jquery сделать...

    будем считать оперу устаревшим браузером без анимации

    вот сделал по вашим стопам, баннер)

    Thumb up 0 Thumb down 0

Оставить комментарий