如何使用纯 CSS 创建带有图标的圆形菜单？

如何在 CSS 中创建径向菜单

概述

本文将提供有关创建圆形菜单的分步指南使用纯 CSS 的图标。目标是避免使用图像或 JavaScript 来提高性能和可访问性。

HTML 结构

径向菜单的 HTML 结构相对简单。它由一个用于切换菜单可见性的输入复选框、一个复选框标签以及一个包含菜单项作为列表元素的无序列表组成：

<input type="checkbox">

CSS 样式

The CSS 样式对于菜单的定位、样式设置和动画至关重要。最重要的属性及其值是：

• 变换： 用于旋转、缩放和倾斜元素以创建径向布局。
• Transition: 设置菜单平滑出现和消失的持续时间和计时功能。
• 边框半径: 为菜单项创建圆角。
• Box-shadow： 为菜单元素添加深度和尺寸。
• 位置： 确保菜单位于屏幕中央。

代码片段

input {
  transform: translate(-100vw);
  visibility: hidden;
}

input:checked ~ ul {
  transform: scale(1);
  opacity: 0.999;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

label, ul, li {
  position: absolute;
  left: 50%;
  bottom: 50%;
}

label {
  transform: translate(-50%, -50%);
  margin: -1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  box-shadow: 0 0 1px 1px white, 0 0.125em 0.25em #876366,  0 0.125em 0.5em #876366;
  background: #d3d3d3;
  background: radial-gradient(#d4c7c5, #e5e1dd);
  cursor: pointer;
}

ul {
  transform: translate(-50%, -50%) scale(0.001);
  transform-origin: 50% 0%;
  will-change: transform;
  opacity: 0.001;
  transition: 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

li {
  overflow: hidden;
  width: 16em;
  height: 16em;
  transform-origin: 0 100%;
}

a {
  display: block;
  transform: rotate(7.5deg)  scaleX(3.8637) skewY(75deg);
  line-height: 3em;
  text-align: center;
  text-decoration: none;
}

结论

这个基于 CSS 的径向菜单提供了一种视觉上吸引人且用户友好的方式来组织和访问选项。通过精心设计 CSS，可以定制菜单以匹配网站或应用程序的整体设计和功能。

以上是如何使用纯 CSS 创建带有图标的圆形菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！