Bagaimana Saya Membuat Menu Pekeliling dengan Ikon Menggunakan CSS Tulen?

Cara Membuat Menu Radial dalam CSS

Gambaran Keseluruhan

Artikel ini akan menyediakan panduan langkah demi langkah untuk mencipta menu bulat dengan ikon menggunakan CSS tulen. Matlamatnya adalah untuk mengelak daripada menggunakan imej atau JavaScript untuk meningkatkan prestasi dan kebolehaksesan.

Struktur HTML

Struktur HTML untuk menu jejari agak mudah. Ia terdiri daripada kotak semak input untuk menogol keterlihatan menu, label untuk kotak pilihan dan senarai tidak tertib yang mengandungi item menu sebagai elemen senarai:

<input type='checkbox'>

Gaya CSS

The Gaya CSS adalah penting untuk meletakkan, menggayakan dan menghidupkan menu. Sifat yang paling penting dan nilainya ialah:

• Transformasi: Digunakan untuk memutar, menskala dan menyerong elemen untuk mencipta reka letak jejari.
• Peralihan: Menetapkan tempoh dan fungsi pemasaan untuk penampilan lancar dan kehilangan menu.
• Jejari sempadan: Mencipta sudut bulat untuk item menu.
• Bayang kotak: Menambah kedalaman dan dimensi pada menu elemen.
• Kedudukan: Memastikan menu dipusatkan pada skrin.

Snippet Kod

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

Kesimpulan

Menu jejari berasaskan CSS ini menawarkan cara yang menarik secara visual dan mesra pengguna untuk mengatur dan mengakses pilihan. Dengan membuat CSS dengan teliti, menu boleh disesuaikan agar sepadan dengan reka bentuk dan kefungsian keseluruhan tapak web atau aplikasi.

Atas ialah kandungan terperinci Bagaimana Saya Membuat Menu Pekeliling dengan Ikon Menggunakan CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!