JavaScript / CSS / HTML исчезают и перемещаются элементы при наведении курсора мыши
Я смотрел веб-сайт SkyZone, и на нем было несколько интересных эффектов JavaScript / CSS / HTML, которые я хотел включить в свой веб-сайт.
https://www.skyzone.com/ (Домашняя страница)
Если вы посмотрите на их панель навигации, то при наведении курсора мыши на кнопку линия плавно появляется и перемещается под текстом.
Если вы перейдете в раздел «Наши основные достопримечательности», в полях достопримечательностей у вас будет кнопка «Просмотреть подробности» с оранжевой стрелкой рядом с ней. Эта стрелка перемещается при наведении указателя мыши на кнопку.
Если бы кто-то мог помочь мне создать эти / похожие эффекты на моем веб-сайте или рассказать, как это делается, я был бы признателен!
вы также можете использовать d3 для подключения некоторых переходов tutorialspoint.com/d3js/d3js_transition.htm
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вот как это сделать:
.nav-item a.hoverbar::after {
content: '';
position: absolute;
bottom: 1rem;
width: 100%;
left: 0;
height: 0.1rem;
background: rgba(0,0,0,0.9);
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
}
.nav-item a.hoverbar:hover::after {
opacity: 1;
transform: translateY(0.2rem);
}
a {
position: relative;
padding: 0;
line-height: 4rem;
}
.nav-item a.stretch::after {
content: '';
top: 2.4rem;
right: -0.4rem;
position: absolute;
width: 0.5rem;
height: 0.5rem;
border: solid;
border-width: 0 0.1rem 0.1rem 0;
transform: rotateZ(-45deg);
border-color: black;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.24, 0.97);
}
.nav-item a.stretch:hover::after {
transform: translateX(100%) rotate(-45deg);
}<nav class = "navbar navbar-expand-lg navbar-light bg-light" role = "navigation">
<div class = "collapse navbar-collapse" id = "navbarToggler">
<ul class = "navbar-nav mr-auto">
<li class = "nav-item active">
<a class = "hoverbar nav-link" href = "/">Home</a>
</li>
<li class = "nav-item">
<a class = "hoverbar nav-link" href = "http://google.com" target = "_blank">Stores</a>
</li>
<li class = "nav-item">
<a class = "hoverbar nav-link" href = "http://google.com" target = "_blank">Events</a>
</li>
<li class = "nav-item">
<a class = "stretch nav-link" href = "http://google.com" target = "_blank">Get Started</a>
</li>
</ul>
</div>
</nav>Демонстрационная ручка: https://codepen.io/siddiquiadeel/pen/vrGdLR
Объяснение: Элементы привязки на панели навигации используют селектор ::после для создания псевдоэлемента в теге привязки, для которого изначально задана непрозрачность 0, поэтому вы не можете его видеть.
К элементу привязки прикреплен псевдокласс : hover вместе с другим псевдоэлементом ::после, который работает как обнаружение событий наведения на элемент привязки и добавление элемента после элемента привязки с определенными свойствами. Этот элемент добавляется только при обнаружении события наведения.
В данном случае это просто непрозрачность и преобразование для анимации. Помните, что к элементу привязки уже прикреплен псевдоэлемент ::после с определенными свойствами, поэтому это просто работает как установка непрозрачности и преобразования, так что вы можете видеть ______, плавающий под элементом привязки.
Аналогичным образом работает анимация стрелки рядом с элементом привязки «Начало работы».
Прочтите документацию по MDN для псевдоклассов и псевдоэлементов CSS.
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
для таких эффектов не нужен javascript, просто чистый простой css, ищите анимацию css