首页 > 文章 > 前端

使用 html css 和 javascript 代码的 Glassmorphism 卡错觉

来源：dev.to

时间：2024-12-31 08:03:34 153浏览收藏

推广推荐

支持 PC / 移动端，安全直达

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《使用 html css 和 javascript 代码的 Glassmorphism 卡错觉》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

使用 html css 和 javascript 代码的 Glassmorphism 卡错觉

<!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 class="neon-shapes">
    <div class="circle"></div>
    <div class="triangle"></div>
    <div class="rectangle"></div>
  </div>

  <div class="card-container">
    <div class="card" onclick="cardClickEffect(this)">
      <img src="./removebg.png" alt="Profile Pic">
      <h3>webstreet_code</h3>
      <div class="author">Author: Alexa</div>
      <button class="follow-btn">Follow Us</button>
    </div>
    <div class="card" onclick="cardClickEffect(this)">
      <img src="./jerry.png" alt="Profile Pic">
      <h3>webstreet_code</h3>
      <div class="author">Author: Jerry</div>
      <button class="follow-btn">Follow Us</button>
    </div>
    <div class="card" onclick="cardClickEffect(this)">
      <img src="./tom.png" alt="Profile Pic">
      <h3>webstreet_code</h3>
      <div class="author">Author: Tom</div>
      <button class="follow-btn">Follow Us</button>
    </div>
  </div>

  <script>
    function cardClickEffect(card) {

  const img = card.querySelector('img');
  img.classList.add('active');

  setTimeout(() => {
    img.classList.remove('active');
  }, 3000); // 3 seconds for the effect duration


      // const img = card.querySelector('img');
      img.style.transform = 'translateY(-20px) scale(1.5)';
      // img.style.boxShadow = '0 10px 60px rgba(255, 255, 0, 1)';
      card.style.transform = 'scale(1.2)';
      card.style.boxShadow = '0 10px 60px rgba(255, 255, 0, 1)';
      setTimeout(() => {
        img.style.transform = 'translateY(0) scale(1)';
        img.style.boxShadow = 'none';
        card.style.transform = 'scale(1)';
        card.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.5)';
      }, 3000);
    }
  </script>
</body>
</html>

本篇关于《使用 html css 和 javascript 代码的 Glassmorphism 卡错觉》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

声明：本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除