suchen

Heim >Web-Frontend >js-Tutorial >Glasmorphismus-Karten-Illusion mit HTML-CSS und Javascript-Code

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

DDD
DDDOriginal
2024-12-09 14:27:17913Durchsuche

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>

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!

JavaScript css html Filter using pointer display position overflow margin padding border viewport background transform transition animation column flex
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Erstellen „let“-Anweisungen globale Eigenschaften in JavaScript?Nächster Artikel：Erstellen „let“-Anweisungen globale Eigenschaften in JavaScript?

In Verbindung stehende Artikel

Mehr sehen