подскажите как сместить фон у ссылки на которую наведен курсор, так чтобы не сдвигать сам элемент и не растягивать само меню? Т.е. сам background
должен уходить за пределы меню вниз, и следовательно пропорционально убирать заливку у элемента сверху. Привожу примерное меню, которое хочу изменить (код не мой, просто для понимания):
Пример
добавить комментарий
|
2 ответа
css Вам в помощь:
@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
:hover {
width: 560px;
height: 400px;
background-image: url(bg-clouds.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
}
-
и как это решает проблему? закрасить элемент при наведении и я могу, но меня интересует как сместить эту закраску. – Денис 27 июл '16 в 13:36
-
1@Денис подключите фантазию и программирование. Обновил пост. Да вариантов куча. Можете делать анимацию на hover, можете просто сдвинуть фон и получите фон родителя. Нарисуйте что хотите дайте денег программистам они Вам зделают. – Makarenko_I_V 27 июл '16 в 13:37
-
Тут Вы можете воспользоваться фоновой картинкой, например, для которой Вы можете задать координаты смещения. xiper.net/collect/html-and-css-tricks/css-tricks/… – DimXenon 27 июл '16 в 13:38
Вот так вроде бы
*{
margin:0;
text-decoration:none;
}
a{
display:block;
width:150px;
text-align:center;
height:50px;
line-height:50px;
background:url(http://i.artfile.ru/s/820966_180414_53_ArtFile_ru.jpg);
background-size:120% 120%;
color:#fefefe;
font-size:20px;
transition:all .5s;
}
a:hover{
background-position:-10px 0;
}
<a href="#"> Главная</a>