html css 및 js 코드를 사용하는 Navbar 아이콘 옵션 ui/ux-JS 튜토리얼-php.cn

html css 및 js 코드를 사용하는 Navbar 아이콘 옵션 ui/ux

Barbara Streisand

풀어 주다： 2024-12-25 14:18:10

원래의

235명이 탐색했습니다.

Navbar icons options ui/ux using html css and js code

<!DOCTYPE html>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>모바일 슬라이더</title>
    <스타일>
        몸 {
            여백: 0;
            패딩: 0;
            글꼴 모음: Arial, sans-serif;
            디스플레이: 플렉스;
            내용 정당화: 센터;
            항목 정렬: 중앙;
            높이: 100vh;
            배경: 선형 그라데이션(아래로, #1a1a2e, #16213e);
            색상: 흰색;
        }

        .slider-컨테이너 {
            디스플레이: 플렉스;
            플렉스 랩: 랩;
            간격: 10px;
            너비: 500px;
            justify-content: 공간 균등하게;
            항목 정렬: 중앙;
        }

        .slider-항목 {
            디스플레이: 플렉스;
            플렉스 방향: 열;
            항목 정렬: 중앙;
            내용 정당화: 센터;
            위치: 상대;
            너비: 80px;
            높이: 80px;
            배경: #1f4068;
            테두리 반경: 50%;
            전환: 변환 0.3초 용이함, 상자 그림자 0.3초 용이함, 배경 0.3초 용이함;
            상자 그림자: 0 4px 6px rgba(0, 0, 0, 0.2);
            커서: 포인터;
        }

        .slider-item:hover {
            변환: scale(1.1);
            상자 그림자: 0 6px 10px rgba(0, 0, 0, 0.3);
        }

        .slider-item.active {
            배경: 선형 그라데이션(오른쪽으로, #ff7e5f, #feb47b); /* 활성에 대한 매력적인 그라데이션 */
            변환: scale(1.2); /* 조금 더 큰 크기 */
            상자 그림자: 0 8px 12px rgba(255, 126, 95, 0.5);
        }

        .slider 항목 i {
            글꼴 크기: 28px;
            색상: 흰색;
        }

        .slider 항목 범위 {
            여백 상단: 8px;
            /* 글꼴 크기: 8px; */
            색상: 흰색;
            텍스트 정렬: 중앙;
        }

        .라벨 {
            글꼴 크기: 12px;
            왼쪽 여백: 15px;
            색상: 흰색;
            여백 상단: 10px;
        }
    </스타일>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</머리>
<본문>
    <div>

로그인 후 복사

위 내용은 html css 및 js 코드를 사용하는 Navbar 아이콘 옵션 ui/ux의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!