Illusion de cartes Glassmorphism utilisant du code HTML CSS et Javascript-js tutoriel-php.cn

Illusion de cartes Glassmorphism utilisant du code HTML CSS et Javascript

DDD

Libérer： 2024-12-09 14:27:17

original

972 Les gens l'ont consulté

Glassmorphism Cards illusion using html css and javascript code

<!DOCTYPE html>
<html lang="fr">
<tête>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cartes interactives en verre</title>
  <style>
    * {
      marge : 0 ;
      remplissage : 0 ;
      dimensionnement de la boîte : bordure-boîte ;
    }
    corps {
      arrière-plan : dégradé linéaire (135 degrés, #101010, #1f1f1f) ;
      hauteur : 100vh ;
      affichage : flexible ;
      aligner les éléments : centre ;
      justifier-contenu : centre ;
      débordement : caché ;
      famille de polices : Arial, sans empattement ;
    }
    .formes néon {
      position : absolue ;
      haut : 0 ;
      gauche : 0 ;
      largeur : 100 % ;
      hauteur : 100 % ;
      événements de pointeur : aucun ;
    }
    .cercle, .triangle, .rectangle {
      position : absolue ;
      opacité : 0,8 ;
      filtre : flou (2 px );
    }
    .cercle {
      largeur : 200 px ;
      hauteur : 200px ;
      arrière-plan : rgba(0, 255, 255, 0,8) ;
      rayon de bordure : 50 % ;
      haut : 20 % ;
      gauche : 15 % ;
    }
    .triangle {
      largeur : 0 ;
      hauteur : 0 ;
      bordure gauche : 100 px solide transparent ;
      bordure droite : 100 px, transparent uni ;
      bordure inférieure : 200 px rgba solide (255, 0, 255, 0,8) ;
      haut : 50 % ;
      gauche : 70 % ;
    }
    .rectangle {
      largeur : 220 px ;
      hauteur : 180px ;
      arrière-plan : rgba(255, 255, 0, 0,8) ;
      haut : 70 % ;
      gauche : 30 % ;
    }
    .conteneur de carte {
      affichage : flexible ;
      écart : 20 px ;
      position : relative ;
      indice z : 1 ;
    }
    .carte {
      arrière-plan : rgba(255, 255, 255, 0,1) ;
      filtre de toile de fond : flou (10 px );
      largeur : 230 px ;
      hauteur : 320 px ;
      rayon de bordure : 15 px ;
      affichage : flexible ;
      direction flexible : colonne ;
      aligner les éléments : centre ;
      justifier-contenu : espace entre les deux ;
      remplissage : 20 px ;
      box-shadow : 0 4px 30px rgba(0, 0, 0, 0.5);
      transition : facilité de transformation de 0,3 s, facilité d'ombre de boîte de 0,3 s ;
    }
    .carte img {
      largeur : 100 px ;
      hauteur : 100px ;
      rayon de bordure : 50 % ;
      transition : transformation 0,3 s, ombre de boîte 0,3 s ;
    }
    .carte h3 {
      couleur : blanc ;
      famille de polices : 'Lucida Sans', 'Lucida Sans Regular', Genève, Verdana, sans-serif ;
    }
    .auteur {
      couleur : blanc ;
      taille de police : 14 px ;
      marge supérieure : -10 px ;
    }
    .follow-btn {
      arrière-plan : rgba(0, 255, 127, 0,7) ;
      bordure : aucune ;
      remplissage : 15px 25px ;
      rayon de bordure : 20 px ;
      couleur : blanc ;
      taille de police : 18 px ;
      curseur : pointeur ;
      transformation de texte : majuscule ;
      animation : néon-scintillement 2s infini ;
      transition : arrière-plan 0,3 s ;
    }
    .follow-btn: survol {
      arrière-plan : rgba(0, 255, 127, 1) ;
    }
    @keyframes néon-scintillement {
      0 %, 100 % {
        box-shadow : 0 0 10px rgba(0, 255, 127, 0,8), 0 0 30px rgba(0, 255, 127, 0,8), 0 0 50px rgba(0, 255, 127, 0,8);
      }
      50% {
        box-shadow : 0 0 20px rgba(0, 255, 127, 1), 0 0 40px rgba(0, 255, 127, 1), 0 0 60px rgba(0, 255, 127, 1);
      }
    }.card: survolez {
      transformation : échelle (1.1);
      ombre de la boîte : 0 8px 50px rgba(0, 255, 127, 0,8) ;
    }
    .carte img {
  largeur : 100 px ;
  hauteur : 100px ;
  rayon de bordure : 50 % ;
  transition : facilité de transformation de 0,3 s, facilité de filtrage de 0,3 s ;
}

.card : survoler img {
  transformer: traduireY(-10px);
}

.card img.active {
  transformer : translateY(-30px) scale(1.2);
  filtre : ombre portée (0 0 20px rgba (255, 255, 0, 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!