1 (2010-10-24 16:25:48 отредактировано SV)

Тема: Двухуровневая интерактивная анимация средствами CSS

Простейшая интерактивная анимация, которая содержит всего два кадра (активно/неактивно), недорога, легко создается, быстро грузится и приятна на глаз. Чаще всего такая двухкадровая анимация, реагирующая на определенные действия пользователя (например на наведение курсора мыши), создается с помощью CSS.

В основе такой анимации применяются картинки в формате, содержащих 2 кадра (2 совмещенные картинки) - верхний (неактивный, который отображается сразу после загрузки страницы) и нижний (активный, который отобразится на реакцию пользователя). http://softvopros.ru/uploads/forum/images/1287930374.gif Также необходимо создать 3 класса в CSS-файле, которые будут управлять поведением нашего интерактивной анимацией:

.rus {
    margin: 0px;   /* без отступа снаружи ячейки */
    padding: 0px;    /* без отступа внутрь ячейки */
    width: 154px;   /* ширина картинки */
    height: 45px;   /* высота картинки */
    background-image: url(../img/rus.gif);   /* относительный путь к двухкадровому изображению */
    background-repeat: no-repeat;   /* фон не должен повторяться */
    float: right;   /* плавающий блок с выравниванием вправо */
    overflow: hidden;   /* обрезать  содержимое, если оно больше указанных размеров */
}

.rus a {
    margin: 0px;
    padding: 0px;
    width: 154px;
    height: 45px;
    background-image: url(../img/rus.gif);
    background-repeat: no-repeat;
    background-position: 0px 0px;    /* показывать первый кадр без смещения */
    float: right;
    overflow: hidden;
}

.rus a:hover {
    width: 154px;
    height: 45px;
    background-image: url(../img/rus.gif);
    background-repeat: no-repeat;
    background-position: 0px -45px;   /* показывать нижний кадр, сместив вверх половину картинки */
    float: right;
}

Первый класс CSS rus задает общий стиль для ячейки, в которой будет находиться анимационная картинка. Второй класс rus a описывает стиль ссылки (например, картинка будет являться ссылкой) и третий класс rus a:hover задает смещение вверх двухкадрового изображения при наведении на картинку, например, указателя мыши.

Последним этапом вставляем HTML-код, предназначенный для вставки анимации на страницу нашего сайта.

<span class="rus"><a href="rus.html" target="_parent" title="RUS"></a></span>

Практический пример:

Поделиться