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

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

 
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 750
Прыгающая иконка
Добрый день, у меня к каждому пункту меню прицеплена небольшая иконка ( например, галочка), так вот как можно в стилях ксс сделать так чтобы галочка слегка подпрыгивала. Пример как на сайте текст ру , прилагаю фото. Мне нужен пример кода, чтобы впихнуть его в ксс и html к любому пункту.
Редактировалось: 1 раз (Последний: 12 марта 2016 в 11:27)
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2928
Не нашел что там на текстру прыгает... Если нужна регистрация что бы увидеть, то пример не удачный!)

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

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

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

пример: .galka:hover { margin-bottom: 5px;}
Реклама
cms
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 750
reload:

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

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

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

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

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

Да наверное нужна регистрация, она как бы раз в 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;}
}
Ваш код сейчас попробую, а что думаете про данный код?
Редактировалось: 2 раз (Последний: 12 марта 2016 в 15:00)
Посетитель
small user social cms
Медаль
Сообщений: 107
Рабочий код вам прислали. Это тот же CSS, с mymove слассом
Редактировалось: 2 раз (Последний: 12 марта 2016 в 16:24)
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 750
Sergey Necr:

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

Да, код рабочий. Но подскажите как его приспособить к моему коду с картинкой. Вот пример моего кода background-image: url(../images/icons/message.png);
} Мне нужно чтобы картинка, которая выводится данным кодом, прыгала. Как прописать это к сожалению не хватает знаний.
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2928
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
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 750
reload:

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

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

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



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

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

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

пишем:

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

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

Эх, к сожалению не срабатывает. Я всё понял. Ставил и идентификатор - 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;}
}
Должна была запрыгать картинка админа, но нет увы..
Прыгающая иконка
Прыгающая иконка
Редактировалось: 1 раз (Последний: 12 марта 2016 в 19:16)
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2928
ps: применил стили для body - нормальная такая темка на 1 апреля получается smile не напряжно и прикольно!)
Такое ощущение что сайт дышит laugh
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2928
polet:
Ставил и идентификатор - admin, my_blog , и даже тот что Вы предложили

polet, там не угадывать нужно и не предполагать - нужно открыть исходный код сайта и посмотреть идентификаторы нужных вам элементов!
Если уникальных идентификаторов нет, то нужно вносить правки в шаблон (нужно создать уникальные идентификаторы)
И при этом нужно также учитывать вложенность блоков и наследуемые стили!
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 750
reload:

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

Ну поздравляю что некоторые стили пошли на пользу)))
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 3591
reload:
Такое ощущение что сайт дышит
Вы примените эти стили к классу .item
Жути больше будет.
Спойлер
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2928
polet, то что вы привели на скрине это хорошо, теперь продублируйте тут что именно вы добавляете в стили!

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

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

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

Что бы иконка прыгала отдельно, нужно немного переделать шаблон - нужно поместить иконку в отдельный блок с отдельным идентификатором!
Редактировалось: 1 раз (Последний: 12 марта 2016 в 19:40)
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 750
reload:

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

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

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

А я именно вот такой код добавляю
.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. Но нет, всё равно всё стоит.. Не знаю на чём ещё попробовать.
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 750
reload:

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

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

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

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

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

Сейчас попробую.
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 3591
polet:
Пример моего кода .admin(
width: 100px;
Пример кода должен начинаться так .admin { --- фигурная скобка, обязательно
В начало страницы
Предыдущая темаСледующая тема Перейти на форум: