马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
全篇大概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>
接下来，让我们为 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;
- }
接下来，我们为菜单链策应用样式，以实现 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;
- }
当用户悬停在链接上时，我们利用悬停效果来实现 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;
- }
通过 ::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 菜单。
点我下载完整代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 | 
