Question

我正在查看SkyZone网站，他们有一些很酷的JavaScript / CSS / HTML效果，我想在我的网站上加入。

https://www.skyzone.com/（主页）

如果您查看他们的导航栏，当您的鼠标悬停在按钮上时，一条线会淡入并移动到文本下方。

如果您进入“我们的核心景点”部分，在吸引框中您会看到一个“查看详细信息”按钮，旁边有一个橙色箭头。当鼠标悬停在按钮上时，此箭头会移动。

如果有人可以帮助我在我的网站上制作这些/类似的效果或告诉我它是如何完成的，我将不胜感激！

Answer 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

说明：导航栏上的锚元素使用 :: after 选择器在锚标记上创建一个伪元素，该标记最初的不透明度设置为0，因此您不能看见。

有一个伪类：悬停附加到锚元素以及另一个 :: after 伪元素，该元素用作检测锚元素上的悬停事件并添加元素具有某些属性的锚元素之后。仅在检测到悬停事件时才添加此元素。

在这种情况下，属性只是不透明度和动画的变换。请记住，已经有一个 :: after 伪元素附加到具有某些属性的锚元素，因此这只是用于设置不透明度和变换，以便您可以看到______漂浮在下面锚元素。

“Get Started”锚元素旁边的箭头动画以类似的方式工作。
阅读有关CSS伪类和伪元素的MDN文档。
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

鼠标悬停时JavaScript / CSS / HTML淡入淡出和移动元素

1 个答案: