Добрый день,
Друзья! Помогите пожалуйста. Я начинающий Веб-разработчик, начал изучать Анимации и попал в затруднение. При верстке сайта по макету шла анимация при наведение( при наведение внизу ссылки появлялась палочка и в итоге растягивалась на длину всего контейнера, ссылка на сайт с примером -
beloweb.ru/javascript-jquery/10-neveroyatnyih-effe...
(2 блок))
В чем проблема?
Я пробовал создавать отдельный прямоугольник, который сначала был на ширину всей ссылки, а при нажатии он мгновенно сворачивался до размеров нужного элемента (то есть маленькой палочки внизу), но проблема в том, что анимация палочка должна быть плавной, и чтобы она резко не прикратилась, необходимо резко переводить мышку на объект шириной в один пиксель( то есть, она сворачивается и становиться маленькой, мышка уже не находиться в области блока и анимация автоматически прекращается.
Помогите как можно решить эту проблему или как можно по другому это реализовать, знаю это очень банальные вещи, но я новичок, поэтому извините:))
С уважением,
новичок
.nav1{
width: 15vh;
height: 10vh;
background-color: blue;
z-index: 0;
display: block;
position: absolute;
top: 1px;
}
.nav11{
width: 15vh;
height: 10vh;
background-color: red;
z-index: 1;
display: block;
position: absolute;
top: 1px;
}
a.nav11{
transition-property: all;
transition-duration: 0s;
z-index: 0;
}
a.nav1:hover{
height: 1vh;
z-index: 100;
}
li.nav11{
transition-property: all;
transition-duration: 1s;
z-index: 0;
}
li.nav11:hover{
width: 20vh
}
<li><a class="nav11"><span class="nav1"></span></a></li>
Простой
