Иногда для того, чтоб привлечение внимание пользователей и гостей сайта, то мы приходим к различным трюкам. Как пример самый распространенный, это движение элемента, которое повторяется и здесь уже точно многие заметят. Можно взять логотип или изображение, но лучше формате 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);
}
}
Для этого нам нужно подключить один класс, а потом уже самостоятельно выставить движение, то которое вам нужно.
Демонстрация
