HTML CSS를 사용한 Forsted Glass 효과

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




          </div>

            
        

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