Aнимация элементов делается только с помощью стилей и никакие скрипты тут не используются.
Ну а теперь давайте всё рассмотрим подробнее.В данном случае мы будем создавать самый обычный блок с разрешением 200 на 100 пикселей, а потом уже прикреплять к нему анимацию.
Обычный блок
HTMLЧтобы добавить такой блок на страницу, нужно просто добавить с соответствующим классом, например:
Код
<div id="box1">Плавное изменение цвета фона </div>
Код
#box {
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;text-indent: 0px;border: 1px solid #888;
cursor: pointer;
}#box:hover {
background-color: #97CE68;
color: #000;
}
Как видите здесь присутствует атрибут
:hover, который меняет стиль фона при наведении, в некоторых примерах он должен быть обязательно.
Плавное изменение цвета элемента при наведении с помощью transition
CSS Код
#box1 {
margin-bottom: 5px;
background-color: #ccc;
padding: 10px;
text-align: center;
width: 200px;
height:100px;text-indent: 0px;
border: 1px solid #888;
-moz-transition: background-color 0.8s 0.1s ease;
-o-transition: background-color 0.8s 0.1s ease;
-webkit-transition: background-color 0.8s 0.1s ease;
cursor: pointer;}#box1[b]:[/b]hover {
background-color: #97CE68;
color: #333;
}
Как видите такую анимацию мы добились с помощью атрибута
transition. Здесь можно изменить скорость анимации в секундах, в данном случае
стоит 0.8с до полного изменения цвета при наведении и 0.1с до того как
сработает анимация после наведения и убирания курсора. (Извиняюсь за
ребус
) Это значение можно изменять как Вам нужно.Цвет фона при наведении ставится атрибутом
:hover, он здесь обязательный, иначе анимация работать не будет.
Изменение размера элемента
CSS Код
#box2 {
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px[b];[/b]text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
cursor: pointer;}#box2[b]:[/b]hover {
background-color: #97CE68;
color: #000;
width: 150px;
height:50px;
}
В этом примере мы добились плавного изменения размера блока при наведении. Стандартная величина 200 на 100, а величина при наведении
составляет 150 на 50, которая задаётся атрибутом
:hover.Ещё здесь можно изменить блок только по ширине или по высоте, нужно просто под
:hover удалить
width: - блок изменяется только по высоте,
height: - блок изменяется только по ширине.Также можно изменить скорость изменения. В данном случае это 1с.
[/size][size=14]Кручение объекта
CSS Код
#box3 {
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 1s 0.1s ease-in;
-o-transition: all 1s 0.1s ease-in;
-webkit-transition: all 1s 0.1s ease-in;
cursor: pointer;}#box3:hover {
background-color: #97CE68;
color: #000;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
Кручение происходит с помощью
transform и
transition. В данном случае объект крутится по часовой стрелке на 360 градусов со
скоростью в одну секунду. Если нужно, чтобы блок крутился против часовой
стрелки, в
transform значении нужно поставить -(минус). Естественно градус оборота можно изменять.
