HTML CSS를 사용한 Forsted Glass 효과-CSS 튜토리얼-php.cn

HTML CSS를 사용한 Forsted Glass 효과

Patricia Arquette

풀어 주다： 2024-12-02 18:26:14

원래의

217명이 탐색했습니다.

Forsted Glass Effect using html css

<!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;
      오버플로: 숨김;
      배경: 선형 그라데이션(135deg, #4a90e2, #9013fe);
      디스플레이: 플렉스;
      항목 정렬: 중앙;
      내용 정당화: 센터;
    }

    .frosted-컨테이너 {
      너비: 300px;
      높이: 200px;
      패딩: 20px;
      디스플레이: 플렉스;
      항목 정렬: 중앙;
      내용 정당화: 센터;
      텍스트 정렬: 중앙;
      색상: 흰색;
      위치: 상대;
      테두리 반경: 15px;
      배경: rgba(255, 255, 255, 0.2);
      배경 필터: 흐림(15px);
      상자 그림자: 0 8px 32px rgba(0, 0, 0, 0.2);
      테두리: 1px 솔리드 rgba(255, 255, 255, 0.3);
      Z-지수: 10;
    }

    .frosted-container h1 {
      글꼴 크기: 1.5rem;
      z-지수: 11;
    }

    /* 다이아몬드 스타일링 */
    .다이아몬드 {
      위치: 절대;
      너비: 10px;
      높이: 10px;
      배경: rgba(255, 255, 255, 0.8);
      변환: 회전(45deg);
      상자 그림자: 0 0 10px rgba(255, 255, 255, 0.8);
      애니메이션: 5초 동안 선형 무한 하강;
    }

    /* 떨어지는 애니메이션 */
    @keyframes 가을 {
      0% {
        상단: -10px;
        왼쪽: calc(100vw * var(--x));
        불투명도: 1;
      }
      100% {
        상단: 100vh;
        왼쪽: calc(100vw * var(--x));
        불투명도: 0;
      }
    }

    /* 여러 개의 다이아몬드 생성 */
    .diamond:nth-child(1) { --x: 0.1; 애니메이션 지속 시간: 4초; }
    .diamond:nth-child(2) { --x: 0.2; 애니메이션 지속 시간: 6초; }
    .diamond:nth-child(3) { --x: 0.3; 애니메이션 지속 시간: 5초; }
    .diamond:nth-child(4) { --x: 0.4; 애니메이션 지속 시간: 4.5초; }
    .diamond:nth-child(5) { --x: 0.5; 애니메이션 지속 시간: 6.5초; }
    .diamond:nth-child(6) { --x: 0.6; 애니메이션 지속 시간: 4.8초; }
    .diamond:nth-child(7) { --x: 0.7; 애니메이션 지속 시간: 5.2초; }
    .diamond:nth-child(8) { --x: 0.8; 애니메이션 지속 시간: 6.1초; }
    .diamond:nth-child(9) { --x: 0.9; 애니메이션 지속 시간: 5.9초; }

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

  <div>

로그인 후 복사

위 내용은 HTML CSS를 사용한 Forsted Glass 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!