【样式】Html 卡片样式

html 复制代码

    .card {
      width: calc(40% - 10px);
      height: 160px;
      display: inline-block; /* 或者 flex / block 根据布局需求 */
      position: relative;
      margin: 10px; /* 添加边距以确保卡片之间有间距 */
      padding: 15px; /* 内边距为内容提供空间 */
      background-color: rgba(255, 255, 255, 0.3); /* 卡片背景色 */
      border-radius: 6px; /* 圆角效果 */
      box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* 阴影效果，可以根据需要调整参数 */
      transition: all 0.3s ease; /* 添加过渡效果，如：hover时的动画 */
     
      
      /* 高斯模糊 */
     backdrop-filter: blur(2px); /* 应用模糊效果到背景（包括其下面的内容） */
     
      /* 可选，添加内边框或外边框 */
      border: 1px solid #ddd;
    
      /* 其他自定义样式，例如最大宽度、对齐方式等 */
      max-width: 300px;
      text-align: center;
      
    }

    
    /*
    .card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url(''); /* 设置背景图片 */
      background-size: cover;
      z-index: -1;
      filter: blur(10px); /* 对背景图片应用模糊效果，仅限于这个伪元素 */
    }
    */
    
    /* 悬停状态下的阴影增强效果 */
    .card:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
    
    }
    



<div class="card">
  <h3>卡片标题</h3>
  <p>这里是卡片的内容...</p>
</div>

进阶

增加卡片旋转的效果

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .glass-card {
      /* 其他样式不变，保持磨砂玻璃效果 */
      /* ... */

      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 
                  0 5px 15px rgba(0, 0, 0, 0.1) rotate(0deg); /* 添加初始阴影样式，并包含旋转角度为0度 */
      
      animation: rotate-shadow 3s linear infinite; /* 应用名为rotate-shadow的动画，持续3秒，线性变化，无限循环 */
    }

    @keyframes rotate-shadow {
      to { /* 在动画结束时（100%） */
        transform: rotate(360deg); /* 让阴影围绕卡片旋转一周 */
      }
    }
  </style>
</head>
<body>
  <div class="glass-card">
    <h3>磨砂玻璃卡片标题</h3>
    <p>此卡片具有磨砂玻璃效果和旋转阴影动画。</p>
  </div>
</body>
</html>

呼吸灯效果

复制代码

   .card {
      width: calc(40% - 10px);
      height: 160px;
      display: inline-block; /* 或者 flex / block 根据布局需求 */
      position: relative;
      margin: 10px; /* 添加边距以确保卡片之间有间距 */
      padding: 15px; /* 内边距为内容提供空间 */
      background-color: rgba(255, 255, 255, 0.3); /* 卡片背景色 */
      border-radius: 6px; /* 圆角效果 */
      box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* 阴影效果，可以根据需要调整参数 */
      transition: all 0.3s ease; /* 添加过渡效果，如：hover时的动画 */
     
      
      /* 高斯模糊 */
     backdrop-filter: blur(2px); /* 应用模糊效果到背景（包括其下面的内容） */
     
      /* 可选，添加内边框或外边框 */
      border: 1px solid #ddd;
    
      /* 其他自定义样式，例如最大宽度、对齐方式等 */
      max-width: 300px;
      text-align: center;
      
      
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 
                  0 5px 15px rgba(0, 0, 0, 0.2) rotate(0deg); /* 添加初始阴影样式，并包含旋转角度为0度 */
      
      /* 旋转效果 */
      /*animation: rotate-shadow 80s linear infinite; */ /* 应用名为rotate-shadow的动画，持续3秒，线性变化，无限循环 */
      
      /* 呼吸灯效果 */
      animation: breathe 3s ease-in-out infinite alternate;
    }
    
    @keyframes rotate-shadow {
      to { /* 在动画结束时（100%） */
        transform: rotate(360deg); /* 让阴影围绕卡片旋转一周 */
      }
    }
    
@keyframes breathe {
    0% {
      transform: scale(0.97);
    }
    100% {
      transform: scale(1.01);
    }
  }