Glasmorphismus-Karten-Illusion mit HTML-CSS und Javascript-Code-js-Tutorial-php.cn

Glasmorphismus-Karten-Illusion mit HTML-CSS und Javascript-Code

DDD

Freigeben： 2024-12-09 14:27:17

Original

926 Leute haben es durchsucht

Glassmorphism Cards illusion using html css and javascript code

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interaktive Glaskarten</title>
  <Stil>
    * {
      Rand: 0;
      Polsterung: 0;
      Boxgröße: border-box;
    }
    Körper {
      Hintergrund: linear-gradient(135deg, #101010, #1f1f1f);
      Höhe: 100 Vh;
      Anzeige: Flex;
      align-items: center;
      rechtfertigen-Inhalt: Mitte;
      Überlauf: versteckt;
      Schriftfamilie: Arial, serifenlos;
    }
    .neon-formen {
      Position: absolut;
      oben: 0;
      links: 0;
      Breite: 100 %;
      Höhe: 100 %;
      Zeigerereignisse: keine;
    }
    .circle, .triangle, .rectangle {
      Position: absolut;
      Deckkraft: 0,8;
      Filter: Unschärfe (2px);
    }
    .Kreis {
      Breite: 200px;
      Höhe: 200px;
      Hintergrund: rgba(0, 255, 255, 0,8);
      Randradius: 50 %;
      oben: 20 %;
      links: 15 %;
    }
    .dreieck {
      Breite: 0;
      Höhe: 0;
      Rand links: 100 Pixel durchgehend transparent;
      Rand rechts: 100 Pixel durchgehend transparent;
      border-bottom: 200px solid rgba(255, 0, 255, 0.8);
      oben: 50 %;
      links: 70 %;
    }
    .Rechteck {
      Breite: 220px;
      Höhe: 180px;
      Hintergrund: rgba(255, 255, 0, 0,8);
      oben: 70 %;
      links: 30 %;
    }
    .card-container {
      Anzeige: Flex;
      Lücke: 20px;
      Position: relativ;
      Z-Index: 1;
    }
    .card {
      Hintergrund: rgba(255, 255, 255, 0,1);
      Hintergrundfilter: Unschärfe (10 Pixel);
      Breite: 230px;
      Höhe: 320px;
      Randradius: 15px;
      Anzeige: Flex;
      Flexrichtung: Spalte;
      align-items: center;
      justify-content: Leerzeichen dazwischen;
      Polsterung: 20px;
      Box-Shadow: 0 4px 30px rgba(0, 0, 0, 0,5);
      Übergang: Transformation mit 0,3 Sekunden Leichtigkeit, Box-Shadow mit 0,3 Sekunden Leichtigkeit;
    }
    .card img {
      Breite: 100px;
      Höhe: 100px;
      Randradius: 50 %;
      Übergang: Transformation 0,3 s, Box-Shadow 0,3 s;
    }
    .card h3 {
      Farbe: weiß;
      Schriftfamilie: „Lucida Sans“, „Lucida Sans Regular“, Geneva, Verdana, serifenlos;
    }
    .Autor {
      Farbe: weiß;
      Schriftgröße: 14px;
      Rand oben: -10px;
    }
    .follow-btn {
      Hintergrund: rgba(0, 255, 127, 0,7);
      Grenze: keine;
      Polsterung: 15px 25px;
      Randradius: 20px;
      Farbe: weiß;
      Schriftgröße: 18px;
      Cursor: Zeiger;
      Texttransformation: Großbuchstaben;
      Animation: Neonflimmern 2s unendlich;
      Übergang: Hintergrund 0,3 s;
    }
    .follow-btn:hover {
      Hintergrund: rgba(0, 255, 127, 1);
    }
    @keyframes Neon-Flimmern {
      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:hover {
      transformieren: Skala(1.1);
      Box-Shadow: 0 8px 50px rgba(0, 255, 127, 0,8);
    }
    .card img {
  Breite: 100px;
  Höhe: 100px;
  Randradius: 50 %;
  Übergang: Transformation 0,3 s Leichtigkeit, Filter 0,3 s Leichtigkeit;
}

.card:hover img {
  transform: TranslateY(-10px);
}

.card img.active {
  transform: TranslateY(-30px) Scale(1.2);
  Filter: Schlagschatten(0 0 20px rgba(255, 255, 0, 1));
}

  </style>
</head>
<Körper>
  <div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonGlasmorphismus-Karten-Illusion mit HTML-CSS und Javascript-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!