Erstellen Sie mithilfe von HTML und CSS einen atemberaubenden „Bend & Reveal'-Hover-Effekt mit illusionistischem Hintergrund-js-Tutorial-php.cn

Erstellen Sie mithilfe von HTML und CSS einen atemberaubenden „Bend & Reveal'-Hover-Effekt mit illusionistischem Hintergrund

DDD

Freigeben： 2024-12-03 22:36:11

Original

675 Leute haben es durchsucht

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

Folgen Sie uns auf Instagram: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bend & Reveal-Effekt</title>
  <Stil>
    * {
      Rand: 0;
      Polsterung: 0;
      Boxgröße: border-box;
    }
    Körper {
      Anzeige: Flex;
      rechtfertigen-Inhalt: Mitte;
      align-items: center;
      Höhe: 100 Vh;
      Hintergrund: linear-gradient(135deg, #1e1e1e, #3c3c3c);
      Überlauf: versteckt;
      Schriftfamilie: Arial, serifenlos;
    }
    .container {
      Position: relativ;
      Breite: 300px;
      Höhe: 400px;
      Perspektive: 1200px;
      Überlauf: sichtbar;
    }

    /* Illusionistisch leuchtender Gitterhintergrund */
    .illusion-bg {
      Position: absolut;
      oben: -20px;
      links: -20px;
      Breite: calc(100% 40px);
      Höhe: calc(100% 40px);
      Hintergrund: Repeating-Linear-Gradient(45deg,
       rgba(255, 255, 255, 0,1) 0 5px, transparent 5px 10px);
      Randradius: 15px;
      box-shadow: inset 0 0 50px rgba(255, 255, 255, 0,05),
       0 0 30px rgba(0, 255, 255, 0,5);
      Z-Index: -1;
      Filter: Unschärfe (5px);
    }

    .image-wrapper {
      Position: relativ;
      Breite: 100 %;
      Höhe: 100 %;
      Transformationsursprung: Mitte unten;
      Übergang: Transformieren mit 0,8 Sekunden Leichtigkeit, Box-Shadow mit 0,8 Sekunden Leichtigkeit, Filter mit 0,6 Sekunden Leichtigkeit;
      Randradius: 15px;
      Überlauf: versteckt;
      Z-Index: 1;
    }
    .image-wrapper img {
      Breite: 100 %;
      Höhe: 100 %;
      Objektanpassung: Abdeckung;
      Randradius: 15px;
      Filter: Helligkeit (80 %);
      Übergang: Filter 0,8 s Leichtigkeit;
    }

    .reveal-png {
      Position: absolut;
      oben: 0;
      links: 0;
      Breite: 100 %;
      Höhe: 100 %;
      Hintergrund: url('./removebg.png') no-repeat center;
      Hintergrundgröße: Cover;
      Deckkraft: 0;
      transform: TranslateY(50px) Scale(0.9);
      Übergang: Deckkraft 0,8 Sekunden, Transformation 0,8 Sekunden, Filter 0,6 Sekunden;
      Filter: Schlagschatten(0 0 15px rgba(255, 255, 255, 0.9));
    }

    /* Hover-Effekte */
    .container:hover .image-wrapper {
      transformieren: rotateX(-70deg) scale(1.05);
      Box-Shadow: 0 30px 60px rgba(0, 0, 0, 0,8);
      Filter: Farbton drehen (30 Grad);
    }

    .container:hover .image-wrapper img {
      Filter: Helligkeit (100 %) gesättigt (1,2);
    }

    .container:hover .reveal-png {
      Z-Index: 1;
      Deckkraft: 1;
      transform: TranslateY(0) Scale(1.06);
      Filter: Schlagschatten(0 0 20px rgba(0, 255, 255, 0.8));
    }

    .container:hover .illusion-bg {
      Animation: Puls 2s unendlich abwechselndes leichtes Ein- und Aussteigen;
    }

    @keyframes Puls {
      0 % {
        transform: Skala(1);
        Deckkraft: 0,8;
      }
      100 % {
        transform: scale(1.05);
        Deckkraft: 1;
      }
    }
  </style>
</head>
<Körper>

<div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonErstellen Sie mithilfe von HTML und CSS einen atemberaubenden „Bend & Reveal'-Hover-Effekt mit illusionistischem Hintergrund. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!