Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Barbara Streisand
Freigeben: 2024-11-10 17:54:02
Original
979 Leute haben es durchsucht

How Do I Create a Circular Menu with Icons Using Pure CSS?

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'>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage