Créez un superbe effet de survol Bend & Reveal avec un arrière-plan illusionniste à l'aide de HTML et CSS-js tutoriel-php.cn

Créez un superbe effet de survol Bend & Reveal avec un arrière-plan illusionniste à l'aide de HTML et CSS

DDD

Libérer： 2024-12-03 22:36:11

original

676 Les gens l'ont consulté

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

Suivez-nous sur Instagram : https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="fr">
<tête>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Effet de courbure et de révélation</title>
  <style>
    * {
      marge : 0 ;
      remplissage : 0 ;
      dimensionnement de la boîte : bordure-boîte ;
    }
    corps {
      affichage : flexible ;
      justifier-contenu : centre ;
      aligner les éléments : centre ;
      hauteur : 100vh ;
      arrière-plan : dégradé linéaire (135 deg, #1e1e1e, #3c3c3c) ;
      débordement : caché ;
      famille de polices : Arial, sans empattement ;
    }
    .conteneur {
      position : relative ;
      largeur : 300 px ;
      hauteur : 400px ;
      perspective : 1 200 px ;
      débordement : visible ;
    }

    /* Fond de grille lumineuse illusionniste */
    .illusion-bg {
      position : absolue ;
      haut : -20px ;
      gauche : -20px ;
      largeur : calc(100 % 40px) ;
      hauteur : calc(100 % 40px) ;
      arrière-plan : dégradé linéaire répétitif (45 deg,
       rgba(255, 255, 255, 0.1) 0 5px, transparent 5px 10px) ;
      rayon de bordure : 15 px ;
      box-shadow : encart 0 0 50px rgba(255, 255, 255, 0,05),
       0 0 30px rgba(0, 255, 255, 0,5);
      indice z : -1 ;
      filtre : flou (5px) ;
    }

    .image-wrapper {
      position : relative ;
      largeur : 100 % ;
      hauteur : 100 % ;
      transformation-origine : centre en bas ;
      transition : facilité de transformation de 0,8 s, facilité d'ombre de boîte de 0,8 s, facilité de filtre de 0,6 s ;
      rayon de bordure : 15 px ;
      débordement : caché ;
      indice z : 1 ;
    }
    .image-wrapper img {
      largeur : 100 % ;
      hauteur : 100 % ;
      ajustement de l'objet : couverture ;
      rayon de bordure : 15 px ;
      filtre : luminosité (80 %) ;
      transition : filtre facilité de 0,8 s ;
    }

    .révéler-png {
      position : absolue ;
      haut : 0 ;
      gauche : 0 ;
      largeur : 100 % ;
      hauteur : 100 % ;
      arrière-plan : url('./removebg.png') centre sans répétition ;
      taille de l'arrière-plan : couverture ;
      opacité : 0 ;
      transformation : traduireY(50px) échelle(0,9);
      transition : facilité d'opacité de 0,8 s, facilité de transformation de 0,8 s, facilité de filtrage de 0,6 s ;
      filtre : ombre portée (0 0 15px rgba (255, 255, 255, 0.9));
    }

    /* Effets de survol */
    .container : survoler .image-wrapper {
      transformation : rotation X (-70 deg) échelle (1,05 );
      box-shadow : 0 30px 60px rgba(0, 0, 0, 0.8);
      filtre : teinte-rotation (30 deg) ;
    }

    .container : survolez .image-wrapper img {
      filtre : luminosité (100 %) saturée (1,2) ;
    }

    .container: survol .reveal-png {
      indice z : 1 ;
      opacité : 1 ;
      transformer : translateY(0) scale(1.06);
      filtre : ombre portée (0 0 20px rgba (0, 255, 255, 0.8));
    }

    .container: survol .illusion-bg {
      animation : impulsion 2s, facilité d'entrée et de sortie alternative infinie ;
    }

    @keyframes impulsion {
      0% {
        transformation : échelle(1);
        opacité : 0,8 ;
      }
      100 % {
        transformer : échelle (1,05) ;
        opacité : 1 ;
      }
    }
  </style>
&Lt;/tête>
<corps>

<div>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!