Home >Web Front-end >JS Tutorial >Glassmorphism Cards illusion using html css and javascript code

Glassmorphism Cards illusion using html css and javascript code

DDDOriginal: 2024-12-09 14:27:17914browse

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Glass Cards</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background: linear-gradient(135deg, #101010, #1f1f1f);
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      font-family: Arial, sans-serif;
    }
    .neon-shapes {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    .circle, .triangle, .rectangle {
      position: absolute;
      opacity: 0.8;
      filter: blur(2px);
    }
    .circle {
      width: 200px;
      height: 200px;
      background: rgba(0, 255, 255, 0.8);
      border-radius: 50%;
      top: 20%;
      left: 15%;
    }
    .triangle {
      width: 0;
      height: 0;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
      border-bottom: 200px solid rgba(255, 0, 255, 0.8);
      top: 50%;
      left: 70%;
    }
    .rectangle {
      width: 220px;
      height: 180px;
      background: rgba(255, 255, 0, 0.8);
      top: 70%;
      left: 30%;
    }
    .card-container {
      display: flex;
      gap: 20px;
      position: relative;
      z-index: 1;
    }
    .card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      width: 230px;
      height: 320px;
      border-radius: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .card h3 {
      color: white;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', Geneva, Verdana, sans-serif;
    }
    .author {
      color: white;
      font-size: 14px;
      margin-top: -10px;
    }
    .follow-btn {
      background: rgba(0, 255, 127, 0.7);
      border: none;
      padding: 15px 25px;
      border-radius: 20px;
      color: white;
      font-size: 18px;
      cursor: pointer;
      text-transform: uppercase;
      animation: neon-flicker 2s infinite;
      transition: background 0.3s;
    }
    .follow-btn:hover {
      background: rgba(0, 255, 127, 1);
    }
    @keyframes neon-flicker {
      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 {
      transform: scale(1.1);
      box-shadow: 0 8px 50px rgba(0, 255, 127, 0.8);
    }
    .card img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transition: transform 0.3s ease, filter 0.3s ease;
}

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

.card img.active {
  transform: translateY(-30px) scale(1.2);
  filter: drop-shadow(0 0 20px rgba(255, 255, 0, 1));
}

  </style>
</head>
<body>
  <div>

The above is the detailed content of Glassmorphism Cards illusion using html css and javascript code. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html Filter using pointer display position overflow margin padding border viewport background transform transition animation column flex

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Do `let` Statements Create Global Properties in JavaScript?Next article：Do `let` Statements Create Global Properties in JavaScript?

See more

Glassmorphism Cards illusion using html css and javascript code

Related articles