이미지나 라이브러리 없이 CSS에서 방사형 메뉴를 만드는 방법은 무엇입니까?

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

소개

방사형 메뉴와 옵션의 고유한 원형 배열은 명령에 액세스하거나 콘텐츠를 탐색할 수 있는 직관적이고 시각적으로 매력적인 방법을 제공합니다. 이 기사에서는 이미지나 타사 라이브러리에 의존하지 않고 CSS를 사용하여 방사형 메뉴를 만드는 기술을 살펴보겠습니다.

HTML 구조

우리는 입력 확인란(메뉴 가시성 전환용), 레이블(중앙 버튼용) 및 순서가 지정되지 않은 목록(방사형 메뉴 항목용)으로 구성된 간단한 HTML 구조로 시작하겠습니다.

<input type='checkbox'>

CSS 구현

이제 CSS를 사용하여 방사형 메뉴의 스타일을 지정하겠습니다. 다음 코드는 피드백을 처리하고 스타일 개선 사항을 통합한 수정된 버전을 보여줍니다.

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

설명

• 확인란: 선택 시 , 확인란을 선택하면 방사형 메뉴의 표시 여부가 전환됩니다.
• 레이블: 레이블은 중앙 버튼으로 위치하며 트리거하는 별표 아이콘을 포함합니다.
• 레이디얼 메뉴 구조: 순서가 지정되지 않은 목록에는 해당 앵커('a')가 있는 목록 요소('li')로 메뉴 항목이 포함됩니다.
• 변환: CSS 변환을 사용하여 다음을 수행합니다. 요소를 회전하고 기울여서 방사형 레이아웃을 만듭니다.
• 그림자 및 그라데이션: 그림자 및 방사형 그라데이션은 버튼과 메뉴 항목에 3D 효과를 제공합니다.
• 유사 요소: 유사 요소는 깊이와 둥근 모서리의 환상을 만듭니다.

이 개선된 데모는 둥근 모서리, 음영 효과 및 항목을 나타내는 선택적 팁을 포함하여 방사형 메뉴의 전체 기능을 보여줍니다. 활성 항목입니다.

위 내용은 이미지나 라이브러리 없이 CSS에서 방사형 메뉴를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!