Прыгающая иконка

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО

Нужна помощь в создании прыгающей иконки

#16 12 марта 2016 в 19:44

Пример моего кода .admin(
width: 100px;
height: 100px;

polet

ага — я все читаю не читая)))

Именно так и записано?
.admin( ???

почему вдруг фигурная скобка заменилась?

должно быть так: .admin {

ps: Loadырь быстрее заметил)
#17 12 марта 2016 в 19:47
.user_group_name .admin {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
0% {top: 0px;}
50% {top: 50px}
100% {top: 0px;}
}

/* Standard syntax */
@keyframes mymove {
0% {top: 0px;}
50% {top: 50px}
100% {top: 0px;}
}
Данный код заработал, но фотография как бы умножается, наверное дело в настройках. Я поработаю дальше потом напишу что получилось.
#18 12 марта 2016 в 19:49


Пример моего кода .admin(
width: 100px;
height: 100px;

polet

ага — я все читаю не читая)))

Именно так и записано?
.admin( ???

почему вдруг фигурная скобка заменилась?

должно быть так: .admin {

ps: Loadырь быстрее заметил)

reload

Да да точно, не заметил )))
#19 12 марта 2016 в 19:54

Вы примените эти стили к классу .item
Жути больше будет.

Loadырь

Не, ерунда)

Ща я скажу как нннаддда!

polet, попробуйте вставить эти стили (если ничего не будет прыгать то все пропало):

  1.  
  2. div {
  3. position: relative;
  4. -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
  5. animation: mymove 5s infinite;
  6. }
  7.  
  8. /* Chrome, Safari, Opera */
  9. @-webkit-keyframes mymove {
  10. 0% {top: 0px;}
  11. 50% {top: 50px}
  12. 100% {top: 0px;}
  13. }
  14.  
  15. /* Standard syntax */
  16. @keyframes mymove {
  17. 0% {top: 0px;}
  18. 50% {top: 50px}
  19. 100% {top: 0px;}
  20. }
  21.  
#20 12 марта 2016 в 19:59

Данный код заработал, но фотография как бы умножается, наверное дело в настройках.

polet

Дело не в настройках — дело в том что вы вообще не понимаете css и html соответственно!

Половину стилей вы сами только что применили:

width: 100px;
height: 100px;
background: red;

— они были для примера как собственно и весь код стилей. В общем те три строки можно удалить — они для наглядности были.
#21 13 марта 2016 в 01:11


Данный код заработал, но фотография как бы умножается, наверное дело в настройках.

polet

Дело не в настройках — дело в том что вы вообще не понимаете css и html соответственно!

Половину стилей вы сами только что применили:

width: 100px;
height: 100px;
background: red;

— они были для примера как собственно и весь код стилей. В общем те три строки можно удалить — они для наглядности были.

reload

Всё работает, просто время не было зайти.
div {
position: relative;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
0% {top: 0px;}
50% {top: 50px}
100% {top: 0px;}
}

/* Standard syntax */
@keyframes mymove {
0% {top: 0px;}
50% {top: 50px}
100% {top: 0px;}
} код и этот и предыдущий работает. А картинка просто сузилась из за того что ширина малая была. Единственное, это можно убрать цвет из кода, мне кажется он вообще не нужен. А так то да, некоторые элементы (картинки) в основном прыгают вместе с надписями, так как присутствуют в одном блоке. Картинку нужно отдельно выводить ( Вы уже писали об этом). Пока что нашел применение данных стилей к некоторым иконкам, и этого достаточно. спасибо за помощь, надеюсь что данная тема будет кому то полезна. width: 100px;
height: 100px; это можно вообще убрать.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.