HTML CSS와 자바스크립트 코드를 사용한 Glassmorphism 카드 환상-JS 튜토리얼-php.cn

HTML CSS와 자바스크립트 코드를 사용한 Glassmorphism 카드 환상

DDD

풀어 주다： 2024-12-09 14:27:17

원래의

926명이 탐색했습니다.

Glassmorphism Cards illusion using html css and javascript 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;
      상자 크기 조정: 테두리 상자;
    }
    몸 {
      배경: 선형 그라데이션(135deg, #101010, #1f1f1f);
      높이: 100vh;
      디스플레이: 플렉스;
      항목 정렬: 중앙;
      내용 정당화: 센터;
      오버플로: 숨김;
      글꼴 모음: Arial, sans-serif;
    }
    .네온 모양 {
      위치: 절대;
      상단: 0;
      왼쪽: 0;
      너비: 100%;
      높이: 100%;
      포인터 이벤트: 없음;
    }
    .원, .삼각형, .직사각형 {
      위치: 절대;
      불투명도: 0.8;
      필터: 흐림(2px);
    }
    .원 {
      너비: 200px;
      높이: 200px;
      배경: rgba(0, 255, 255, 0.8);
      테두리 반경: 50%;
      최고: 20%;
      왼쪽: 15%;
    }
    .삼각형 {
      너비: 0;
      높이: 0;
      테두리 왼쪽: 100px 투명 투명;
      테두리 오른쪽: 100px 투명 투명;
      테두리 하단: 200px 솔리드 rgba(255, 0, 255, 0.8);
      상단: 50%;
      왼쪽: 70%;
    }
    .사각형 {
      너비: 220px;
      높이: 180px;
      배경: rgba(255, 255, 0, 0.8);
      최고: 70%;
      왼쪽: 30%;
    }
    .카드 컨테이너 {
      디스플레이: 플렉스;
      간격: 20px;
      위치: 상대;
      Z-색인: 1;
    }
    .카드 {
      배경: rgba(255, 255, 255, 0.1);
      배경 필터: 흐림(10px);
      너비: 230px;
      높이: 320px;
      테두리 반경: 15px;
      디스플레이: 플렉스;
      플렉스 방향: 열;
      항목 정렬: 중앙;
      내용 정당화: 공백 사이;
      패딩: 20px;
      상자 그림자: 0 4px 30px rgba(0, 0, 0, 0.5);
      전환: 변환 0.3초 용이성, 상자 그림자 0.3초 용이성;
    }
    .카드 이미지 {
      너비: 100px;
      높이: 100px;
      테두리 반경: 50%;
      전환: 변환 0.3초, 상자 그림자 0.3초;
    }
    .카드 h3 {
      색상: 흰색;
      글꼴 모음: 'Lucida Sans', 'Lucida Sans Regular', Geneva, Verdana, sans-serif;
    }
    .작가 {
      색상: 흰색;
      글꼴 크기: 14px;
      여백 상단: -10px;
    }
    .follow-btn {
      배경: rgba(0, 255, 127, 0.7);
      테두리: 없음;
      패딩: 15px 25px;
      테두리 반경: 20px;
      색상: 흰색;
      글꼴 크기: 18px;
      커서: 포인터;
      텍스트 변환: 대문자;
      애니메이션: 네온 깜박임 2s 무한;
      전환: 배경 0.3초;
    }
    .follow-btn:hover {
      배경: rgba(0, 255, 127, 1);
    }
    @keyframes 네온 깜박임 {
      0%, 100% {
        상자 그림자: 0 0 10px rgba(0, 255, 127, 0.8), 0 0 30px rgba(0, 255, 127, 0.8), 0 0 50px rgba(0, 255, 127, 0.8);
      }
      50% {
        상자 그림자: 0 0 20px rgba(0, 255, 127, 1), 0 0 40px rgba(0, 255, 127, 1), 0 0 60px rgba(0, 255, 127, 1);
      }
    }.card:hover {
      변환: scale(1.1);
      상자 그림자: 0 8px 50px rgba(0, 255, 127, 0.8);
    }
    .카드 이미지 {
  너비: 100px;
  높이: 100px;
  테두리 반경: 50%;
  전환: 변환 0.3초 용이성, 필터 0.3초 용이성;
}

.card:hover img {
  변환: 번역Y(-10px);
}

.card img.active {
  변환: 번역Y(-30px) 스케일(1.2);
  필터: drop-shadow(0 0 20px rgba(255, 255, 0, 1));
}

  </스타일>
</머리>
<본문>
  <div>

로그인 후 복사

위 내용은 HTML CSS와 자바스크립트 코드를 사용한 Glassmorphism 카드 환상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!