• 【样式】Html 卡片样式

    【样式】Html 卡片样式

    1.     .card {
    2.       width: calc(40% - 10px);
    3.       height: 160px;
    4.       display: inline-block; /* 或者 flex / block 根据布局需求 */
    5.       position: relative;
    6.       margin: 10px; /* 添加边距以确保卡片之间有间距 */
    7.       padding: 15px; /* 内边距为内容提供空间 */
    8.       background-color: rgba(255, 255, 255, 0.3); /* 卡片背景色 */
    9.       border-radius: 6px; /* 圆角效果 */
    10.       box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* 阴影效果，可以根据需要调整参数 */
    11.       transition: all 0.3s ease; /* 添加过渡效果，如：hover时的动画 */
    12.      
    13.       
    14.       /* 高斯模糊 */
    15.      backdrop-filter: blur(2px); /* 应用模糊效果到背景（包括其下面的内容） */
    16.      
    17.       /* 可选，添加内边框或外边框 */
    18.       border: 1px solid #ddd;
    19.     
    20.       /* 其他自定义样式，例如最大宽度、对齐方式等 */
    21.       max-width: 300px;
    22.       text-align: center;
    23.       
    24.     }
    25.  
    26.     
    27.     /*
    28.     .card::before {
    29.       content: "";
    30.       position: absolute;
    31.       top: 0;
    32.       left: 0;
    33.       right: 0;
    34.       bottom: 0;
    35.       background-image: url(''); /* 设置背景图片 */
    36.       background-size: cover;
    37.       z-index: -1;
    38.       filter: blur(10px); /* 对背景图片应用模糊效果，仅限于这个伪元素 */
    39.     }
    40.     */
    41.     
    42.     /* 悬停状态下的阴影增强效果 */
    43.     .card:hover {
    44.       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
    45.     
    46.     }
    47.     
    48.  
    49.  
    50.  
    51. <div class="card">
    52.   <h3>卡片标题h3>
    53.   <p>这里是卡片的内容...p>
    54. div>

    进阶

    增加卡片旋转的效果

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <style>
    7.     .glass-card {
    8.       /* 其他样式不变，保持磨砂玻璃效果 */
    9.       /* ... */
    10.  
    11.       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 
    12.                   0 5px 15px rgba(0, 0, 0, 0.1) rotate(0deg); /* 添加初始阴影样式，并包含旋转角度为0度 */
    13.       
    14.       animation: rotate-shadow 3s linear infinite; /* 应用名为rotate-shadow的动画，持续3秒，线性变化，无限循环 */
    15.     }
    16.  
    17.     @keyframes rotate-shadow {
    18.       to { /* 在动画结束时（100%） */
    19.         transform: rotate(360deg); /* 让阴影围绕卡片旋转一周 */
    20.       }
    21.     }
    22.   </style>
    23. </head>
    24. <body>
    25.   <div class="glass-card">
    26.     <h3>磨砂玻璃卡片标题</h3>
    27.     <p>此卡片具有磨砂玻璃效果和旋转阴影动画。</p>
    28.   </div>
    29. </body>
    30. </html>

    呼吸灯效果

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

  • 相关阅读:
    Mac 上 VMvare 虚拟机 Centos 上的 Docker 容器中的文件夹共享到 Mac 实体机
    Open Interpreter，一个让ChatGPT入驻你的电脑并获得联网能力成为贾维斯！
    机器学习实战应用案例100篇（十）-蝙蝠算法从原理到实战应用案例
    GLOG 日志宏分析与PR合并
    linux内核中的offsetof、container_of、双链表list.h实践
    智慧电网是什么？如何理解智慧？
    安装docker
    长时间戴耳机耳朵不舒服？骨传导耳机可以缓解这个问题
    Day719. 矢量运算 -Java8后最重要新特性
    计算机网络-----传输层的概述
  • 原文地址：https://blog.csdn.net/G971005287W/article/details/136877734