HTML 및 CSS를 사용하여 환상적 배경으로 멋진 구부리기 및 호버 효과 표시-JS 튜토리얼-php.cn

HTML 및 CSS를 사용하여 환상적 배경으로 멋진 구부리기 및 호버 효과 표시

DDD

풀어 주다： 2024-12-03 22:36:11

원래의

730명이 탐색했습니다.

Create a Stunning Bend & Reveal Hover Effect with Illusionistic Background Using HTML & CSS

인스타그램 팔로우: https://www.instagram.com/webstreet_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;
      상자 크기 조정: 테두리 상자;
    }
    몸 {
      디스플레이: 플렉스;
      내용 정당화: 센터;
      항목 정렬: 중앙;
      높이: 100vh;
      배경: 선형 그라데이션(135deg, #1e1e1e, #3c3c3c);
      오버플로: 숨김;
      글꼴 모음: Arial, sans-serif;
    }
    .컨테이너 {
      위치: 상대;
      너비: 300px;
      높이: 400px;
      원근감: 1200px;
      오버플로: 표시됨;
    }

    /* 환상적으로 빛나는 그리드 배경 */
    .illusion-bg {
      위치: 절대;
      상단: -20px;
      왼쪽: -20px;
      너비: 계산(100% 40px);
      높이: 계산(100% 40px);
      배경: 반복-선형-그라디언트(45deg,
       rgba(255, 255, 255, 0.1) 0 5px, 투명 5px 10px);
      테두리 반경: 15px;
      상자 그림자: 삽입 0 0 50px rgba(255, 255, 255, 0.05),
       0 0 30px rgba(0, 255, 255, 0.5);
      Z-색인: -1;
      필터: 흐림(5px);
    }

    .이미지 래퍼 {
      위치: 상대;
      너비: 100%;
      높이: 100%;
      변환 원점: 중앙 하단;
      전환: 변환 0.8초 용이함, 상자 그림자 0.8초 용이함, 필터 0.6초 용이함;
      테두리 반경: 15px;
      오버플로: 숨김;
      Z-색인: 1;
    }
    .image-wrapper img {
      너비: 100%;
      높이: 100%;
      개체 맞춤: 커버;
      테두리 반경: 15px;
      필터: 밝기(80%);
      전환: 필터 0.8초 용이성;
    }

    .공개-png {
      위치: 절대;
      상단: 0;
      왼쪽: 0;
      너비: 100%;
      높이: 100%;
      배경: url('./remobeg.png') 반복 없음 센터;
      배경 크기: 표지;
      불투명도: 0;
      변환: 번역Y(50px) 스케일(0.9);
      전환: 불투명도 0.8초 완화, 변환 0.8초 완화, 필터 0.6초 완화;
      필터: drop-shadow(0 0 15px rgba(255, 255, 255, 0.9));
    }

    /* 호버 효과 */
    .container:hover .image-wrapper {
      변환: 회전X(-70deg) 스케일(1.05);
      상자 그림자: 0 30px 60px rgba(0, 0, 0, 0.8);
      필터: 색상 회전(30deg);
    }

    .container:hover .image-wrapper img {
      필터: 밝기(100%) 채도(1.2);
    }

    .컨테이너:hover .reveal-png {
      Z-색인: 1;
      불투명도: 1;
      변환: 번역Y(0) 스케일(1.06);
      필터: drop-shadow(0 0 20px rgba(0, 255, 255, 0.8));
    }

    .container:hover .illusion-bg {
      애니메이션: 펄스 2초 무한 대체 이지아웃;
    }

    @keyframes 펄스 {
      0% {
        변환: scale(1);
        불투명도: 0.8;
      }
      100% {
        변환: scale(1.05);
        불투명도: 1;
      }
    }
  </스타일>
</머리>
<본문>

<div>

로그인 후 복사

위 내용은 HTML 및 CSS를 사용하여 환상적 배경으로 멋진 구부리기 및 호버 효과 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!