Pure CSS를 사용하여 아이콘이 포함된 원형 메뉴를 어떻게 만들 수 있나요?

CSS에서 방사형 메뉴를 만드는 방법

개요

이 문서에서는 다음을 사용하여 원형 메뉴를 만드는 방법에 대한 단계별 가이드를 제공합니다. 순수 CSS를 사용하는 아이콘. 목표는 성능과 접근성 향상을 위해 이미지나 JavaScript를 사용하지 않는 것입니다.

HTML 구조

방사형 메뉴의 HTML 구조는 비교적 간단합니다. 이는 메뉴의 가시성을 전환하는 입력 체크박스, 체크박스의 레이블, 메뉴 항목을 목록 요소로 포함하는 순서가 지정되지 않은 목록으로 구성됩니다.

<input type="checkbox">

CSS 스타일

CSS 스타일은 메뉴 위치 지정, 스타일 지정 및 애니메이션에 매우 중요합니다. 가장 중요한 속성과 해당 값은 다음과 같습니다.

• 변형: 방사형 레이아웃을 만들기 위해 요소를 회전, 크기 조정 및 기울이는 데 사용됩니다.
• 전환: 부드러운 등장과 소멸을 위해 지속 시간과 타이밍 기능을 설정합니다. 메뉴.
• 테두리 반경: 메뉴 항목의 둥근 모서리를 만듭니다.
• 상자 그림자: 메뉴에 깊이와 크기를 추가합니다. 요소.
• 위치: 메뉴가 요소의 중앙에 오도록 합니다.

코드 조각

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

결론

이 CSS 기반 방사형 메뉴는 시각적으로 매력적이고 사용자 친화적인 방법으로 옵션을 구성하고 액세스할 수 있습니다. . CSS를 세심하게 제작하면 웹사이트나 애플리케이션의 전반적인 디자인과 기능에 맞게 메뉴를 맞춤화할 수 있습니다.

위 내용은 Pure CSS를 사용하여 아이콘이 포함된 원형 메뉴를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!