Wie erstelle ich ein Radialmenü in CSS ohne Bilder oder Bibliotheken?

So erstellen Sie ein Radialmenü in CSS

Einführung

Radialmenüs mit ihren Die einzigartige kreisförmige Anordnung der Optionen bietet eine intuitive und optisch ansprechende Möglichkeit, auf Befehle zuzugreifen oder durch Inhalte zu navigieren. In diesem Artikel befassen wir uns mit den Techniken zum Erstellen eines Radialmenüs mithilfe von CSS, ohne auf Bilder oder Bibliotheken von Drittanbietern angewiesen zu sein.

HTML-Struktur

Wir Wir beginnen mit einer einfachen HTML-Struktur, die aus einem Eingabe-Kontrollkästchen (zum Umschalten der Menüsichtbarkeit), einer Beschriftung (für die zentrale Schaltfläche) und einer ungeordneten Liste (für das Radialmenü) besteht Elemente).

<input type='checkbox'>

CSS-Implementierung

Jetzt gestalten wir unser Radialmenü mit CSS. Der folgende Code zeigt eine überarbeitete Version, die auf Feedback eingeht und stilistische Verbesserungen enthält.

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

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

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

label, a {
    color: #858596;
    font: 700 1em/ 2em sans-serif;
    text-align: center;
    text-shadow: 0 1px 1px #6c6f7e;
    cursor: pointer;
}

label {
    z-index: 2;
    margin: -1em;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    box-shadow: 0 0 1px 1px white,  0 .125em .25em #876366,  0 .125em .5em #876366;
    background: #d3d3d3;
    background: -webkit-radial-gradient(#d4c7c5, #e5e1dd);
    background: radial-gradient(#d4c7c5, #e5e1dd);
}

ul {
    z-index: 1;
    margin: -10em 0;
    padding: 0;
    list-style: none;
    transform-origin: 50% -13em;
    transform: scale(0.001); 
    will-change: transform;
    opacity: .001;
    filter: drop-shadow(0 0.125em 0.25em #847c77);
    transition: 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
ul:before, ul:after {
    position: absolute;
    margin: -3em -0.25em;
    width: 0.5em;
    height: 3em;
    transform-origin: 50% 100%;
    background: #d3d3d3;
    background: -webkit-linear-gradient(#ddd, #c9c4bf);
    background: linear-gradient(#ddd, #c9c4bf);
    content: '';
}
ul:before {
    border-radius: 0.5em 0 0 0.5em;
    transform: rotate(-22.5deg) translate(-0.25em, -13em);
    box-shadow: inset 1px 0 1px #eee;
}
ul:after {
    border-radius: 0 0.5em 0.5em 0;
    transform: rotate(22.5deg) translate(0.25em, -13em);
    box-shadow: inset -1px 0 1px #eee;
}

li {
    overflow: hidden;
    width: 16em;
    height: 16em;
    transform-origin: 0 100%;
}
li:nth-child(1) {
    transform: rotate(-22.625deg) skewY(-75deg) scaleX(0.25882);
}
li:nth-child(2) {
    transform: rotate(-7.5deg) skewY(-75deg) scaleX(0.25882);
}
li:nth-child(2) a:after {
    position: absolute;
    top: 3em;
    left: 50%;
    margin: -0.375em;
    width: 0.75em;
    height: 0.75em;
    transform: rotate(45deg);
    box-shadow: inset -1px -1px 1px #eee;
    background: -webkit-linear-gradient(135deg, #bbb, #c9c4bf 50%);
    background: linear-gradient(-45deg, #bbb, #c9c4bf 50%);
    content: '';
}
li:nth-child(3) {
    transform: rotate(7.625deg) skewY(-75deg) scaleX(0.25882);
}
li a, li:before {
    margin: 0 -16em;
    width: 32em;
    height: 32em;
    border-radius: 50%;
}
li:before, li:after {
    position: absolute;
    border-radius: 50%;
    transform: scaleX(3.8637) skewY(75deg);
    content: '';
}
li:before {
    box-shadow: inset 0 0 1px 1px #fff, inset 0 0 3em #ebe7e2, inset 0 0 1px 2.9375em #c9c4bf, inset 0 0 0 3em #dcdcdc;
}
li:after {
    top: 100%;
    left: 0;
    margin: -13em;
    width: 26em;
    height: 26em;
    border-radius: 50%;
}

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

Erklärung

• Kontrollkästchen: Wenn aktiviert , das Kontrollkästchen schaltet die Sichtbarkeit des Radials um Menü.
• Beschriftung: Die Beschriftung ist als zentrale Schaltfläche positioniert und enthält das auslösende Sternsymbol.
• Radiale Menüstruktur: Die ungeordnete Liste enthält die Menüpunkte als Listenelemente ('li') mit ihren jeweiligen Ankern ('a').
• Transformationen: Wir verwenden CSS-Transformationen, um das radiale Layout durch Drehen und Neigen von Elementen zu erstellen.
• Schatten und Verläufe: Schatten und radiale Farbverläufe verleihen den Schaltflächen und Menüelementen einen 3D-Effekt.
• Pseudo Elemente:Pseudoelemente erzeugen die Illusion von Tiefe und abgerundeten Kanten.

Diese verbesserte Demonstration zeigt die volle Funktionalität des Radialmenüs mit abgerundeten Ecken, Schattierungseffekten und optionalen Tipps zum Anzeigen der aktives Element.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Radialmenü in CSS ohne Bilder oder Bibliotheken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!