• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать CSS-анимация движения изображения (CSS3-анимация позволяет создавать эффекты движения)
Создать CSS-анимация движения изображения
Kosten
Дата: Воскресенье, 2020-03-22, 23:37 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29147
Награды: 62


Иногда для того, чтоб привлечение внимание пользователей и гостей сайта, то мы приходим к различным трюкам. Как пример самый распространенный, это движение элемента, которое повторяется и здесь уже точно многие заметят. Можно взять логотип или изображение, но лучше формате PNG, так, чтоб на светлом сайте или на темном корректно смотрелось.

Установка:

HTML

Код
<img src="http://zornet.ru/ABVUN/Abaavag/4598469.png" class="motion-pictures">

CSS

Код
.motion-pictures {
    margin-top: 100px;
    /*margin-left: -150px;*/
    position: absolute;
    -webkit-animation: backlight 1s linear infinite;
    -moz-animation: backlight 1s linear infinite;
    -ms-animation: backlight 1s linear infinite;
    -o-animation: backlight 1s linear infinite;
    animation: backlight 1s linear infinite;
}
@-webkit-keyframes backlight {
    0% {
        -webkit-transform: translate(0, 0);
    }
    50% {
        -webkit-transform: translate(0px, 50px);
    }
    100% {
        -webkit-transform: translate(0, 0);
    }
}
@-moz-keyframes backlight {
    0% {
        -moz-transform: translate(0, 0);
    }
    50% {
        -moz-transform: translate(0px, 50px);
    }
    100% {
        -moz-transform: translate(0, 0);
    }
}
@-o-keyframes backlight {
    0% {
        -o-transform: translate(0, 0);
    }
    50% {
        -o-transform: translate(10px, 50px);
    }
    100% {
        -o-transform: translate(0, 0);
    }
}
@keyframes backlight {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(15px, 50px);
    }
    100% {
        transform: translate(0, 0);
    }
}

Для этого нам нужно подключить один класс, а потом уже самостоятельно выставить движение, то которое вам нужно.

Демонстрация
Прикрепления: dvasamon.zip(2.3 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать CSS-анимация движения изображения (CSS3-анимация позволяет создавать эффекты движения)
  • Страница 1 из 1
  • 1
Поиск: