Шаг №1

Для начала осуществим один простой метод – изменение цвета при наведении на него курсорам мыши.

a { color:#000; } a:hover { color:#f00; }

Здесь мы изменили цвет текста при наведении на него. А теперь, немного CSS3. Сейчас создадим более гладкий вид постепенно затухающего цвета.

a{ color:#000; -webkit-transition:color 1s ease-in; } a:hover{ color:#f00; }

Мы добавили свойства WebKit перехода. Обратите внимание, что префикс WebKit определяет то, что это будет работать только в браузерах на основе WebKit. Другие современные браузеры имеют свою собственную реализацию. Для того чтобы работало во всех браузерах нужно сделать следующим образом:

a { color:#000; -webkit-transition:color 1s ease-in; -moz-transition:color 1s ease-in; -o-transition:color 1s ease-in; transition:color 1s ease-in; }

Обратите внимание, что в этом уроке, мы будем использовать только осуществления в WebKit. После того как мы задали значение "color 1s ease-in". Эти три значения представляют:

— Свойство перехода;

— Продолжительность перехода;

— Тип перехода.

В нашем случае переход начнется, медленно ускоряясь в переходной период.

Шаг №2

Другим способом изменения мы можем использовать цвет фона.

input.ourInputBox:focus { -webkit-transition:background-color 0.5s linear; background:#CCC; }

В этот раз переход мы поставили в наведенное состояние, так что нам не нужно добавлять дополнительные классы. При вводе будет приобретать фокус.

Шаг №3

CSS переходы сейчас очень актуальны. Сейчас мы сделаем переход еще более красочным.

Для этого мы будем использовать переход нескольких свойств CSS с помощью CSS3.

a.thebg { color:#000; background:#f00; padding:5px; -webkit-border-radius: 5px; -webkit-transition-property:color, background; -webkit-transition-duration: 1s, 1s; -webkit-transition-timing-function: linear, ease-in; } a.thebg:hover { color:#f00; background:#000; }

В этот раз, при наведении, цвет фона и текста изменился. Мы задаем оба этих свойства в нашем переходе. С помощью -webkit-transition-property разделим значения фона и цвета запятой.

-webkit-transition-property:color, background;

Затем мы установим продолжительность перехода:

-webkit-transition-duration:1s, 1s;

Эти значения используются в том же порядке, что и предыдущие.

Наконец, мы задали сроки выполнения и установили два различных значения связанные с цветом и фоном. Итак, мы установили изменение цвета и фона, для простоты, более одной секунды.

Шаг №4

Давайте сейчас создадим простой пример анимации.

Сначала создадим рамку указатели, и дадим ему позицию relative, чтобы мы так же могли позиционировать пункты.

#signpost{ width:60px; height:196px; position:relative; }

Теперь разместим наши элементы на странице:

<div id="signpost"> <img id="post" src="post.png"> <img id="sign" src="sign.png"> </div>

Далее для id=post задаем Z-index равное 2, для того чтобы поместить его в самый вверх.

#post{ width:79px; height:196px; z-index:2; position:relative; }

Теперь работаем с id=sign.

#sign { height:46px; width:80px; position:absolute; top:10; left:60; -webkit-transform-origin:0 0; -webkit-transform: rotate(86deg); z-index:1; -webkit-transition:-webkit-transform 0.5s ease-in-out; }

Флажок поворачивается с помощью -webkit-transform: rotate(86deg) и позиционированием. Для того чтобы задать вращение вокруг точки, мы должны изменить значения transform origin на верхнее левое: 0,0.

При наведении курсора мыши -webkit-transform поставим значение равное 0,5s c параметром ease-in-out. После того как курсор будет убран, вернем знак в свое первичное положение.

#signpost:hover #sign{ -webkit-transform:rotate(0deg); }

Мы делаем это при наведении на весь #signpost, а не просто на #sign.

Шаг№5

Теперь пришло время для создания непрерывного вращения. Начнем с создания двух кругов, которые поместим в тег div, как мы сделали в предыдущем шаге.

<div id="circles"> <img src="outer.png" width="180" height="180" class="outercircle"/> <img src="middle.png" width="90" height="90" class="middlecircle"/> </div> #circles{ width:180px; height:180px; position:relative; } .outercircle{ width:180px; height:180px; position:absolute; z-index:1; top:0: left:0; } .middlecircle{ width:90px; height:90px; position:absolute; z-index:3; top:45px; left:45px; }

Теперь мы должны определиться с анимацией. Так как у нас два круга, нам нужно создать две анимации.

@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-webkit-keyframes spinrev { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); } }

Для анимации мы задаем имя, в данном случае – это ‘ spin’ и ‘spinrev’. Затем создаем вращение от 0 до 360 градусов и используя webkit transform -360 градусов, для вращения в обратном порядке.

Приведем нашу анимацию в рабочий вид. Теперь она будет работать сразу после загрузки страницы.

#circles:hover .outercircle { -webkit-animation-name: spin; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration: 10s; } #circles:hover .middlecircle{ -webkit-animation-name: spinrev; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration: 5s; }

Для внешнего круга определяем имя, которое мы задали ранее (-webkit-animation-name: spin;). Потом, задаем количество вращений (-webkit-animation-iteration-count: infinite;). В этом случае вращение будет бесконечным.

Затем для внутреннего круга устанавливаем функцию времени (-webkit-animation-timing-function: linear;) и продолжительность интервала вращения (-webkit-animation-duration: 10s; в нашем случае продолжительность будет 10 секунд) и количество полных вращений.

На этом, пожалуй, и все. Надеюсь, Вам понравился урок.