985 Вы, наверное, уже встречали статью в этом блоге, посвященную созданию вращающихся лучей с помощью CSS и JavaScript. Теперь пришло время пересмотреть код, сделать его лучше и легче (только под CSS).
Структура HTML
Структура такая же, как и в прошлом посте:
|
1 2 3 |
<div id="raysDemoHolder"> <a href="/" id="raysLogo">David Walsh Blog</a> <div id="rays"></div> </div> |
Один родительский элемент с двумя потомками: лого и контейнер лучей.
CSS
Предыдущая CSS версия вращающихся лучей использовала свойство CSS transforms, но сейчас мы будем использовать @keyframes. Основная идея состоит в том, чтобы с помощью кейфреймов поворачивать лучи командой rotate с 0 deg по 360 deg:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
/* keyframes for animation; simple 0 to 360 */ @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } /* basic structure for the rays setup */ #raysDemoHolder { position: relative; width: 490px; height: 490px; margin: 100px 0 0 200px; } #raysLogo { width: 300px; height: 233px; text-indent: -3000px; background: url(logo.png) 0 0 no-repeat; display: block; position: absolute; top: 0; left: 0; z-index: 2; } #rays { /* with animation properties */ background: url(rays.png) 0 0 no-repeat; position: absolute; top: -100px; left: -100px; width: 490px; height: 490px; /* webkit chrome, safari, mobile */ -webkit-animation-name: spin; -webkit-animation-duration: 40000ms; /* 40 seconds */ -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; /* mozilla ff */ -moz-animation-name: spin; -moz-animation-duration: 40000ms; /* 40 seconds */ -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; /* microsoft ie */ -ms-animation-name: spin; -ms-animation-duration: 40000ms; /* 40 seconds */ -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; } #rays:hover { /* -webkit-animation-duration: 10000ms; 10 seconds - speed it up on hover! */ /* resets the position though! sucks */ } |
Используя функции animation-timing-function, animation-duration и animation-iteration-count, мы добьемся того, что анимация будет линейной, поступательной и, самое главное, бесконечной!
Также, стоит отметить, что анимация более гладкая, чем при использовании JavaScript. Также есть проблемы с браузером Opera. Браузер не поддерживает @keyframes.
Но, в Опере есть свойство -o-transition. Попробуем сделать анимацию через это свойство.
«Костыли» для Оперы или CSS+JS
Для начала, добавим для элемента DIV с ID #rays следующие строки.
|
1 2 3 4 |
-o-transition-property: all; -o-transition-duration: 40000ms; -o-transition-delay: 0s; -o-transition-timing-function: linear; |
Согласитесь, чем-то напоминает animation. (;
Далее переписываем следующий код
|
1 2 3 |
#rays:hover { /* -webkit-animation-duration: 10000ms; 10 seconds - speed it up on hover! */ } |
в такой
|
1 2 3 4 |
.rays, #rays:hover { -o-transform: rotate(360deg); /* -webkit-animation-duration: 10000ms; 10 seconds - speed it up on hover! */ } |
А теперь JS магия. Дело в том, что -o-transition будет работать только, если у элемента сменится селектор и никак иначе. Поэтому в загрузку страницы вставляем автоматическую смену селектора. Подключаем JS файл в хедере HTML.
|
1 |
<script src="transitions.js" type="text/javascript"></script> |
и прописываем в тег body запуск этого скрипта.
|
1 |
<body onload="runDemo()"> |
Исходник файла transitions.js смотрите в примере.
И так поддерживаемые браузеры:
firefox chrome safari opera
как ни пробовал в опере так и не заработало
-o-transition: rotate (3600deg);
стоит последняя версия 11.60
проверил. действительно в опере не работает.
чуть позже добавлю рабочий вариант.
но увы для оперы он будет с костылями)...
привинтил костыли и исправил пост.
смотрите пример. теперь в опере все работает.
с js уже не то, тогда уж проще на jquery сделать...
будем считать оперу устаревшим браузером без анимации
вот сделал по вашим стопам, баннер)
круто! рад был помочь.