recherche

Maison >interface Web >js tutoriel >Illusion de cartes Glassmorphism utilisant du code HTML CSS et Javascript

Illusion de cartes Glassmorphism utilisant du code HTML CSS et Javascript

DDD
DDDoriginal
2024-12-09 14:27:17914parcourir

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>

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!

JavaScript css html Filter using pointer display position overflow margin padding border viewport background transform transition animation column flex
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：Les instructions « let » créent-elles des propriétés globales en JavaScript ?Article suivant：Les instructions « let » créent-elles des propriétés globales en JavaScript ?

Articles Liés

Voir plus