Wie erstelle ich mit reinem CSS ein kreisförmiges Menü mit Symbolen?

So erstellen Sie ein radiales Menü in CSS

Übersicht

Dieser Artikel bietet eine Schritt-für-Schritt-Anleitung zum Erstellen eines kreisförmigen Menüs mit Symbole mit reinem CSS. Ziel ist es, die Verwendung von Bildern oder JavaScript zu vermeiden, um die Leistung und Zugänglichkeit zu verbessern.

HTML-Struktur

Die HTML-Struktur für das Radialmenü ist relativ einfach. Es besteht aus einem Eingabe-Kontrollkästchen zum Umschalten der Sichtbarkeit des Menüs, einer Beschriftung für das Kontrollkästchen und einer ungeordneten Liste, die die Menüelemente als Listenelemente enthält:

<input type="checkbox">

CSS-Stile

Die CSS-Stile sind für die Positionierung, Gestaltung und Animation des Menüs von entscheidender Bedeutung. Die wichtigsten Eigenschaften und ihre Werte sind:

• Transformieren: Wird zum Drehen, Skalieren und Neigen von Elementen verwendet, um das radiale Layout zu erstellen.
• Übergang: Legt die Dauer und Timing-Funktion für das reibungslose Erscheinen und Verschwinden des Menüs fest.
• Randradius: Erstellt die abgerundeten Ecken für die Menüelemente.
• Box-Shadow: Fügt den Menüelementen Tiefe und Dimension hinzu.
• Position: Stellt sicher, dass das Menü auf dem Bildschirm zentriert ist.

Code-Snippet

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;
}

Fazit

Dieses CSS-basierte Radialmenü bietet eine optisch ansprechende und benutzerfreundliche Möglichkeit, Optionen zu organisieren und darauf zuzugreifen. Durch sorgfältige Gestaltung des CSS kann das Menü an das Gesamtdesign und die Funktionalität der Website oder Anwendung angepasst werden.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit reinem CSS ein kreisförmiges Menü mit Symbolen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!