recherche

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

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

DDD
DDDoriginal
2024-12-03 22:36:11671parcourir

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>

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!

css html Object Filter using display position overflow margin padding border viewport background transform transition animation flex https
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment créer un compte à rebours simple en utilisant uniquement JavaScript ?Article suivant：Comment créer un compte à rebours simple en utilisant uniquement JavaScript ?

Articles Liés

Voir plus