✨ Glassmorphism 및 네온 효과로 드롭다운 메뉴를 바꿔보세요! ✨-JS 튜토리얼-php.cn

✨ Glassmorphism 및 네온 효과로 드롭다운 메뉴를 바꿔보세요! ✨

Linda Hamilton

풀어 주다： 2024-12-10 08:42:15

원래의

1013명이 탐색했습니다.

✨ Transform Your Dropdown Menu with Glassmorphism & Neon Effects! ✨

<!DOCTYPE html>
<html lang="ko">
<머리>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>네온 글래스모피즘 드롭다운</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <스타일>
    /* 전역 스타일링 */
    몸 {
      마진: 0;
      높이: 100vh;
      디스플레이: 플렉스;
      항목 정렬: 중앙;
      내용 정당화: 센터;
      배경: 선형 그라데이션(135deg, #0f0f0f, #1a1a1a);
      글꼴 계열: 'Arial', 산세리프;
      색상: #fff;
    }

    /* 드롭다운 컨테이너 */
    .드롭다운 {
      위치: 상대;
      디스플레이: 인라인 블록;
      배경: rgba(255, 255, 255, 0.1);
      테두리 반경: 12px;
      배경 필터: 흐림(15px);
      패딩: 20px;
      상자 그림자: 0 8px 20px rgba(255, 255, 255, 0.1);
      전환: 상자 그림자 0.3초 용이함, 배경 0.3초 용이함;
    }

    .dropdown:hover {
      배경: rgba(255, 255, 255, 0.2);
      상자 그림자: 0 8px 30px rgba(255, 255, 255, 0.2);
    }

    .dropdown-btn {
      패딩: 15px 20px;
      글꼴 크기: 16px;
      테두리: 없음;
      테두리 반경: 8px;
      색상: 흰색;
      커서: 포인터;
      개요: 없음;
      디스플레이: 플렉스;
      항목 정렬: 중앙;
      내용 정당화: 공백 사이;
      배경: rgba(255, 255, 255, 0.1);
      배경 필터: 흐림(10px);
      상자 그림자: 0 5px 15px rgba(0, 0, 0, 0.3);
      전환: 배경 0.3초 완화, 상자 그림자 0.3초 완화;
    }

    .dropdown-btn:hover {
      배경: rgba(255, 255, 255, 0.2);
      상자 그림자: 0 5px 20px rgba(255, 255, 255, 0.5);
    }

    /* 드롭다운 메뉴 */
    .드롭다운 메뉴 {
      위치: 절대;
      상단: 70px;
      왼쪽: 0;
      너비: 260px;
      배경: rgba(255, 255, 255, 0.1);
      테두리 반경: 12px;
      상자 그림자: 0 10px 30px rgba(0, 0, 0, 0.5);
      배경 필터: 흐림(15px);
      패딩: 10px;
      디스플레이: 없음;
      플렉스 방향: 열;
    }

    .dropdown:hover .dropdown-menu {
      디스플레이: 플렉스;
    }

    .드롭다운 메뉴 li {
      목록 스타일: 없음;
      패딩: 12px 15px;
      디스플레이: 플렉스;
      항목 정렬: 중앙;
      간격: 10px;
      커서: 포인터;
      색상: #fff;
      테두리 반경: 8px;
      오버플로: 숨김;
      전환: 배경 0.3초 완화, 상자 그림자 0.3초 완화, 색상 0.3초 완화;
    }

    /* 아이콘과 텍스트 */
    .드롭다운 메뉴 li i {
      글꼴 크기: 24px;
      전환: 색상 0.3초 용이성;
    }

    .dropdown-menu 리 스팬 {
      글꼴 크기: 16px;
      전환: 색상 0.3초 용이성;
    }

    /* 호버 효과 */
    .드롭다운 메뉴 li:hover {
      배경: 선형 그라데이션(135deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 255, 0.2));
      상자 그림자: 0 0 15px rgba(0, 255, 255, 0.5), 0 0 25px rgba(255, 0, 255, 0.4);
      색상: #fff;
    }.드롭다운 메뉴 li:hover i {
      색상: #0ff; /* 네온 청록색 */
    }

    .dropdown-menu li:hover 범위 {
      색상: #f0f; /* 네온 마젠타 */
    }
  </스타일>
</머리>
<본문>
  <div>

로그인 후 복사

위 내용은 ✨ Glassmorphism 및 네온 효과로 드롭다운 메뉴를 바꿔보세요! ✨의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!