使用 HTML 和 CSS 创建 3D 菜单效果

时间:2024-10-10 06:56:53

全篇大概2000 字(含代码),建议阅读时间10分钟。

在本篇文章中,我们将学习如何使用 HTML 和 CSS 创建一个简洁美观的 3D 菜单。通过结合一些 CSS 属性,我们可以为文本添加深度效果,并且在用户鼠标悬停时呈现出动态的 3D 效果。我们会一步一步解释代码的实现过程,让你轻松掌握如何应用到自己的项目中。

你可以学到什么?

1. 如何使用 HTML <li> 标签结构化菜单。

2. 如何使用 CSS 实现自定义字体和悬停效果。

3. 通过 ::before 和 ::after 伪元素创建 3D 文本效果,并使用 CSS 过渡效果增强动画效果。

一、HTML结构

菜单的 HTML 结构非常简单。我们在一个 div 容器中使用无序列表(<li>),每个菜单项是一个链接(<a>),并且通过 data-text 属性来存储与文本内容相同的值,用于后续创建 3D 效果。

每个 li 代表一个菜单项。

标签是链接,data-text 属性用于存储文本内容,后面我们将使用它实现 3D 效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D 菜单</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="menu">
        <li class="menu__item">
            <a class="menu__link" href="#" data-text="JavaScript">JavaScript</a>
        </li>
        <li class="menu__item">
            <a class="menu__link" href="#" data-text="Java">Java</a>
        </li>
        <li class="menu__item">
            <a class="menu__link" href="#" data-text="Python">Python</a>
        </li>
    </div>
</body>
</html>

二、CSS样式

接下来,让我们为 3D 菜单应用 CSS 样式。首先我们为 body 设置一个深色背景,并使用 Flexbox 让菜单居中显示。

使用 display: flex 和 justify-content: center,确保菜单水平和垂直居中。

背景颜色设置为 #212121(深灰色),使得白色文本更加突出。

2.1 基础样式 

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    color: #fff;
    background: #212121;
}
​
.menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

2.2 菜单链接的样式

接下来,我们为菜单链接应用样式,以实现 3D 效果。

1. font-weight: 900 使文本呈现出粗体。

2. -webkit-text-stroke: 1px #fff 属性为文本添加了1像素的白色描边,使文本轮廓更加清晰。

3. user-select: none 确保文本无法被选中,避免不必要的高亮。

.menu__link {
    position: relative;
    display: block;
    font-weight: 900;
    font-size: 5rem;
    line-height: 1.5;
    text-decoration: none;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    user-select: none;
}

2.3 悬停效果

当用户悬停在链接上时,我们利用悬停效果来实现 3D 动画效果。

1. 当鼠标悬停在链接上时,文本颜色变为白色,描边颜色变为背景颜色(#212121)。

2. ::before 和 ::after 伪元素分别根据 transform 位移,形成不同颜色的层次效果(#ff1744 和 #4dd0e1)。

.menu__link:hover {
    color: #fff;
    -webkit-text-stroke: 1px #212121;
    transition: 0.25s;
}
​
.menu__link:hover::before {
    transform: translate(4px, -4px);
    color: #ff1744;
    -webkit-text-stroke: 1px #212121;
}
​
.menu__link:hover::after {
    transform: translate(10px, -10px);
    color: #4dd0e1;
    -webkit-text-stroke: 1px #212121;
}

2.4 伪元素创建 3D 层次

通过 ::before 和 ::after 伪元素,我们在主文本后方生成额外的文本层,并在鼠标悬停时移动这些层次,呈现出深度效果。

content: attr(data-text) 确保伪元素的内容与主链接的文本内容一致,取自 data-text 属性。

z-index: 1 将伪元素放置在主文本的后方。

-webkit-text-stroke: 1px transparent 默认情况下伪元素是不可见的,只有在悬停时才会显现。

.menu__link::before,
.menu__link::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: 0.5s;
    -webkit-text-stroke: 1px transparent;
}

三、添加深度和动画

为了让 3D 效果更生动,我们使用平滑过渡。transform 和 transition 属性确保当用户悬停时,文本层次会平滑移动,营造出 3D 动态效果。

.menu__link:hover::before {
    transform: translate(4px, -4px);
}
​
.menu__link:hover::after {
    transform: translate(10px, -10px);
}

总结

通过几行简单的 HTML 和 CSS,我们就能创建一个非常有视觉吸引力的 3D 菜单效果。这个效果可以根据不同的需求进行自定义,比如更改颜色、字体大小或是位移值。你可以尝试不同的设计,制作出独具特色的 3D 菜单。

点我下载完整代码