Pure CSS를 사용하여 아이콘이 포함된 원형 메뉴를 어떻게 만들 수 있나요?-CSS 튜토리얼-php.cn

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

Barbara Streisand

풀어 주다： 2024-11-10 17:54:02

원래의

974명이 탐색했습니다.

How Do I Create a Circular Menu with Icons Using 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;
}

로그인 후 복사