IT评测·应用市场-qidao123.com技术社区

标题: 使用 HTML 和 CSS 创建 3D 菜单效果 [打印本页]
作者: 张裕    时间: 2024-10-9 22:30
标题: 使用 HTML 和 CSS 创建 3D 菜单效果
全篇大概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 效果。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>3D 菜单</title>
  7.     <link rel="stylesheet" href="styles.css">
  8. </head>
  9. <body>
  10.     <div class="menu">
  11.         <li class="menu__item">
  12.             <a class="menu__link" href="#" data-text="JavaScript">JavaScript</a>
  13.         </li>
  14.         <li class="menu__item">
  15.             <a class="menu__link" href="#" data-text="Java">Java</a>
  16.         </li>
  17.         <li class="menu__item">
  18.             <a class="menu__link" href="#" data-text="Python">Python</a>
  19.         </li>
  20.     </div>
  21. </body>
  22. </html>
复制代码
二、CSS样式

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

   使用 display: flex 和 justify-content: center，确保菜单水平和垂直居中。
  配景颜色设置为 #212121（深灰色），使得白色文本更加突出。
  2.1 基础样式 

  1. body {
  2.     display: flex;
  3.     align-items: center;
  4.     justify-content: center;
  5.     min-height: 100vh;
  6.     color: #fff;
  7.     background: #212121;
  8. }
  9. ​
  10. .menu {
  11.     margin: 0;
  12.     padding: 0;
  13.     list-style: none;
  14. }
复制代码
2.2 菜单链接的样式

接下来，我们为菜单链策应用样式，以实现 3D 效果。
   1. font-weight: 900 使文本呈现出粗体。
  2. -webkit-text-stroke: 1px #fff 属性为文本添加了1像素的白色描边，使文本表面更加清晰。
  3. user-select: none 确保文本无法被选中，制止不须要的高亮。
  1. .menu__link {
  2.     position: relative;
  3.     display: block;
  4.     font-weight: 900;
  5.     font-size: 5rem;
  6.     line-height: 1.5;
  7.     text-decoration: none;
  8.     color: transparent;
  9.     -webkit-text-stroke: 1px #fff;
  10.     user-select: none;
  11. }
复制代码
2.3 悬停效果

当用户悬停在链接上时，我们利用悬停效果来实现 3D 动画效果。
   1. 当鼠标悬停在链接上时，文本颜色变为白色，描边颜色变为配景颜色（#212121）。
  2. ::before 和 ::after 伪元素分别根据 transform 位移，形成差异颜色的层次效果（#ff1744 和 #4dd0e1）。
  1. .menu__link:hover {
  2.     color: #fff;
  3.     -webkit-text-stroke: 1px #212121;
  4.     transition: 0.25s;
  5. }
  6. ​
  7. .menu__link:hover::before {
  8.     transform: translate(4px, -4px);
  9.     color: #ff1744;
  10.     -webkit-text-stroke: 1px #212121;
  11. }
  12. ​
  13. .menu__link:hover::after {
  14.     transform: translate(10px, -10px);
  15.     color: #4dd0e1;
  16.     -webkit-text-stroke: 1px #212121;
  17. }
复制代码
2.4 伪元素创建 3D 层次

通过 ::before 和 ::after 伪元素，我们在主文本后方生成额外的文本层，并在鼠标悬停时移动这些层次，呈现出深度效果。
   content: attr(data-text) 确保伪元素的内容与主链接的文本内容划一，取自 data-text 属性。
  z-index: 1 将伪元素放置在主文本的后方。
  -webkit-text-stroke: 1px transparent 默认情况下伪元素是不可见的，只有在悬停时才会显现。
  1. .menu__link::before,
  2. .menu__link::after {
  3.     content: attr(data-text);
  4.     position: absolute;
  5.     top: 0;
  6.     left: 0;
  7.     z-index: 1;
  8.     transition: 0.5s;
  9.     -webkit-text-stroke: 1px transparent;
  10. }
复制代码
三、添加深度和动画

为了让 3D 效果更生动，我们使用平滑过渡。transform 和 transition 属性确保当用户悬停时，文本层次会平滑移动，营造出 3D 动态效果。
  1. .menu__link:hover::before {
  2.     transform: translate(4px, -4px);
  3. }
  4. ​
  5. .menu__link:hover::after {
  6.     transform: translate(10px, -10px);
  7. }
复制代码
总结

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



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/) Powered by Discuz! X3.4