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

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

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

#1 12 марта 2016 в 11:27
Добрый день, у меня к каждому пункту меню прицеплена небольшая иконка ( например, галочка), так вот как можно в стилях ксс сделать так чтобы галочка слегка подпрыгивала. Пример как на сайте текст ру, прилагаю фото. Мне нужен пример кода, чтобы впихнуть его в ксс и html к любому пункту.
#2 12 марта 2016 в 13:54
Не нашел что там на текстру прыгает… Если нужна регистрация что бы увидеть, то пример не удачный!)

как можно в стилях ксс сделать так чтобы галочка слегка подпрыгивала.

polet

Сама по себе?)) Или по наведению курсора?!)

Если по наведению, то для блока c галочкой, допустим с классом .galka, добавляем действие hover и в стилях прописываем например margin-bottom

пример: .galka:hover { margin-bottom: 5px;}
#3 12 марта 2016 в 14:57


Не нашел что там на текстру прыгает… Если нужна регистрация что бы увидеть, то пример не удачный!)

как можно в стилях ксс сделать так чтобы галочка слегка подпрыгивала.

polet

Сама по себе?)) Или по наведению курсора?!)

Если по наведению, то для блока c галочкой, допустим с классом .galka, добавляем действие hover и в стилях прописываем например margin-bottom

пример: .galka:hover { margin-bottom: 5px;}

reload

Да наверное нужна регистрация, она как бы раз в 5 секунд перемещается с одного положение в другое ( как будто мячик отпрыгивает)
А если сама по себе, как сделать? Мне прислали код но не могу понять как его прицепить
div {
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;}
}
Ваш код сейчас попробую, а что думаете про данный код?
#4 12 марта 2016 в 16:23
Рабочий код вам прислали. Это тот же CSS, с mymove слассом
#5 12 марта 2016 в 16:28


Рабочий код вам прислали. Это тот же CSS, с mymove слассом

Sergey Necr

Да, код рабочий. Но подскажите как его приспособить к моему коду с картинкой. Вот пример моего кода background-image: url(../images/icons/message.png);
} Мне нужно чтобы картинка, которая выводится данным кодом, прыгала. Как прописать это к сожалению не хватает знаний.
#6 12 марта 2016 в 18:47

как его приспособить к моему коду с картинкой

polet

Смотрите какой есть "идентификатор" у вашего элемента, по нему и применяйте стили.

Для примера, на данном сайте код вашего аватара выглядит так:

<img border="0" class="usr_img_small" src="/images/users/avatars/small/nopic.jpg">

Здесь "идентификатор" class="usr_img_small"

От сюда приведенный выше код, вместо:

div {
width: 100px;
height: 100px;
.....

пишем:

.usr_img_small {
width: 100px;
height: 100px;
....

Но это все ерунда, так как нюансов достаточно и вариантов тоже — вам для начала нужно хоть немного разобраться в html и css
#7 12 марта 2016 в 19:12


как его приспособить к моему коду с картинкой

polet

Смотрите какой есть "идентификатор" у вашего элемента, по нему и применяйте стили.

Для примера, на данном сайте код вашего аватара выглядит так:



Здесь "идентификатор" class="usr_img_small"

От сюда приведенный выше код, вместо:

div {
width: 100px;
height: 100px;
.....

пишем:

.usr_img_small {
width: 100px;
height: 100px;
....

Но это все ерунда, так как нюансов достаточно и вариантов тоже — вам для начала нужно хоть немного разобраться в html и css

reload

Эх, к сожалению не срабатывает. Я всё понял. Ставил и идентификатор — admin, my_blog, и даже тот что Вы предложили в примере. Ни одна из иконок и тем более аватар не запрыгал. Спасибо за помощь, буду копать дальше.
Пример моего кода .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;}
}
Должна была запрыгать картинка админа, но нет увы…
#8 12 марта 2016 в 19:13
ps: применил стили для body — нормальная такая темка на 1 апреля получается smileне напряжно и прикольно!)
Такое ощущение что сайт дышит laugh
#9 12 марта 2016 в 19:16

Ставил и идентификатор — admin, my_blog, и даже тот что Вы предложили

polet

polet, там не угадывать нужно и не предполагать — нужно открыть исходный код сайта и посмотреть идентификаторы нужных вам элементов!
Если уникальных идентификаторов нет, то нужно вносить правки в шаблон (нужно создать уникальные идентификаторы)
И при этом нужно также учитывать вложенность блоков и наследуемые стили!
#10 12 марта 2016 в 19:18


ps: применил стили для body — нормальная такая темка на 1 апреля получается smileне напряжно и прикольно!)
Такое ощущение что сайт дышит laugh

reload

Ну поздравляю что некоторые стили пошли на пользу)))
#11 12 марта 2016 в 19:33

Такое ощущение что сайт дышит

reload
Вы примените эти стили к классу .item
Жути больше будет.
  1. .item {
  2. position: relative;
  3. -webkit-animation: mymove 5s infinite;
  4. animation: mymove 5s infinite;
  5. }
  6.  
  7. @-webkit-keyframes mymove {
  8. 0% {top: 0px;}
  9. 50% {top: 150%}
  10. 100% {top: 0px;}
  11. }
  12.  
  13. @keyframes mymove {
  14. 0% {top: 0px;}
  15. 50% {top: 150%}
  16. 100% {top: 0px;}
  17. }
#12 12 марта 2016 в 19:36
polet, то что вы привели на скрине это хорошо, теперь продублируйте тут что именно вы добавляете в стили!

admin тут как бы можно применить, нужно так
.admin { — точка перед admin обязательна!

Но лучше скопировать стиль блока который уже применяется — справа на вашем скрине видно
.user_group_name .admin {

Но! это для наглядности что таки работает — там будет "прыгать" весь пункт, иконка с заголовком.

Что бы иконка прыгала отдельно, нужно немного переделать шаблон — нужно поместить иконку в отдельный блок с отдельным идентификатором!
#13 12 марта 2016 в 19:41


polet, то что вы привели на скрине єто хорошо, теперь продублируйте тут что именно вы добавляете в стили!

admin тут как бы можно применить, нужно так
.admin { — точка перед admin обязательна!

Но лучше скопировать стиль блока который уже применяется — справа на вашем скрине видно

reload

А я именно вот такой код добавляю
.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;}
}
точку ставлю, и всё это пишу в style.txt.
Код
<div class="admin"> (
width: 100px;
height: 100px; — и так далее наверное будет неправильным, поэтому просто ставлю .admin. Но нет, всё равно всё стоит… Не знаю на чём ещё попробовать.
#14 12 марта 2016 в 19:42


polet, то что вы привели на скрине это хорошо, теперь продублируйте тут что именно вы добавляете в стили!

admin тут как бы можно применить, нужно так
.admin { — точка перед admin обязательна!

Но лучше скопировать стиль блока который уже применяется — справа на вашем скрине видно
.user_group_name .admin {

Но! это для наглядности что таки работает — там будет "прыгать" весь пункт, иконка с заголовком.

Что бы иконка прыгала отдельно, нужно немного переделать шаблон — нужно поместить иконку в отдельный блок с отдельным идентификатором!

reload

Сейчас попробую.
#15 12 марта 2016 в 19:42

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

polet
Пример кода должен начинаться так .admin { — фигурная скобка, обязательно
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.