Прыгающая иконка
Нужна помощь в создании прыгающей иконки
как можно в стилях ксс сделать так чтобы галочка слегка подпрыгивала.
Сама по себе?)) Или по наведению курсора?!)
Если по наведению, то для блока c галочкой, допустим с классом .galka, добавляем действие hover и в стилях прописываем например margin-bottom
пример: .galka:hover { margin-bottom: 5px;}
Не нашел что там на текстру прыгает… Если нужна регистрация что бы увидеть, то пример не удачный!)
как можно в стилях ксс сделать так чтобы галочка слегка подпрыгивала.
Сама по себе?)) Или по наведению курсора?!)
Если по наведению, то для блока 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;}
}
Ваш код сейчас попробую, а что думаете про данный код?
Рабочий код вам прислали. Это тот же CSS, с mymove слассом
Да, код рабочий. Но подскажите как его приспособить к моему коду с картинкой. Вот пример моего кода background-image: url(../images/icons/message.png);
} Мне нужно чтобы картинка, которая выводится данным кодом, прыгала. Как прописать это к сожалению не хватает знаний.
как его приспособить к моему коду с картинкой
Смотрите какой есть "идентификатор" у вашего элемента, по нему и применяйте стили.
Для примера, на данном сайте код вашего аватара выглядит так:
<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
как его приспособить к моему коду с картинкой
Смотрите какой есть "идентификатор" у вашего элемента, по нему и применяйте стили.
Для примера, на данном сайте код вашего аватара выглядит так:
Здесь "идентификатор" 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;}
}
Должна была запрыгать картинка админа, но нет увы…
не напряжно и прикольно!) Такое ощущение что сайт дышит
Ставил и идентификатор — admin, my_blog, и даже тот что Вы предложили
polet, там не угадывать нужно и не предполагать — нужно открыть исходный код сайта и посмотреть идентификаторы нужных вам элементов!
Если уникальных идентификаторов нет, то нужно вносить правки в шаблон (нужно создать уникальные идентификаторы)
И при этом нужно также учитывать вложенность блоков и наследуемые стили!
ps: применил стили для body — нормальная такая темка на 1 апреля получается
Такое ощущение что сайт дышит
Ну поздравляю что некоторые стили пошли на пользу)))
Вы примените эти стили к классу .itemТакое ощущение что сайт дышит
Жути больше будет.
admin тут как бы можно применить, нужно так
.admin { — точка перед admin обязательна!
Но лучше скопировать стиль блока который уже применяется — справа на вашем скрине видно
.user_group_name .admin {
Но! это для наглядности что таки работает — там будет "прыгать" весь пункт, иконка с заголовком.
Что бы иконка прыгала отдельно, нужно немного переделать шаблон — нужно поместить иконку в отдельный блок с отдельным идентификатором!
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. Но нет, всё равно всё стоит… Не знаю на чём ещё попробовать.
polet, то что вы привели на скрине это хорошо, теперь продублируйте тут что именно вы добавляете в стили!
admin тут как бы можно применить, нужно так
.admin { — точка перед admin обязательна!
Но лучше скопировать стиль блока который уже применяется — справа на вашем скрине видно
.user_group_name .admin {
Но! это для наглядности что таки работает — там будет "прыгать" весь пункт, иконка с заголовком.
Что бы иконка прыгала отдельно, нужно немного переделать шаблон — нужно поместить иконку в отдельный блок с отдельным идентификатором!
Сейчас попробую.
Пример кода должен начинаться так .admin { — фигурная скобка, обязательноПример моего кода .admin(
width: 100px;