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.
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'>
Die CSS-Stile sind für die Positionierung, Gestaltung und Animation des Menüs von entscheidender Bedeutung. Die wichtigsten Eigenschaften und ihre Werte sind:
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; }
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!