带有悬停动画的全屏菜单 - 分步指南

超文本标记语言

对于 HTML，我们需要一个包含菜单项列表的容器。

<div class="container">
    <ul class="menu">
        <li class="menu-item">HOME</li>
        <li class="menu-item">WELCOME</li>
    </ul>
</div>

CSS

对于 CSS，首先我们要设置容器的样式。

我们将其绝对定位，通过将顶部、底部、左侧和右侧属性设置为零来悬停整个屏幕。

然后我们将使用 Flexbox 将列表放置在中心并将背景颜色设置为紫色。

.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(167, 118, 221);
}

现在我们正在设计列表的样式。

删除填充和列表样式类型。

我们还将在列中显示菜单项。

.menu {
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
}

现在让我们设置菜单项的样式。

我们将设置宽度、高度和字体大小。

现在，我们将使用 Flexbox 将文本显示在中心并设置过渡，以便悬停效果（我们稍后将添加）平滑。

当然，我们将光标设置为指针和一点透明的文本颜色。

.menu-item {
    height: 70px;
    width: 100vw;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s ease-in;
    cursor: pointer;
    color: rgba(0,0,0,.4);
}

悬停时，我们将增加字体大小并将颜色设置为白色。

我们将添加一点文本阴影并增加字体粗细。

通过过渡，这种变化将是美好而顺利的。

.menu-item:hover {
    font-size: 35px;
    transition: .3s ease-out;
    color: #fff;
    text-shadow: 0px 0px 50px rgb(161, 95, 232);
    font-weight: 600;
}

就是这样。