幫助:Card布局

效果预览图

描述

已封装CSS布局（.card .card-content .card-container）的卡片（Card）。

用来统一展示游戏角色信息、兽展信息、人物信息等大量信息，类似于游戏仓库展示页面。符合现代化网页的设计，应用广泛。

CSS代码已针对移动端和Pad端（480px、768px、1024px）进行响应式布局，兼容绝大多数浏览器，任意拖拽窗口都可以自适应调整横排卡片数量。

通过.card .card:hover优化了浏览器性能并调用GPU加速，加载速度更快。

  will-change: transform;    /* 预告知浏览器可能的变化 */
  transform: translateZ(0);  /* 触发GPU加速层 */

响应式布局

使用说明

使用前需先调用一次card-container（使卡片横向排列），用一个div包裹住所有卡片，不需要重复调用。

<div class="card-container">

<div class="card">
[[文件:图片|link=词条链接]]
    <p>名称</p>
    <div>备注</div>
</div>

...

</div>

生成的效果如下：

当鼠标悬停在卡片时主要文本变色，并显示词条预览。

库尔沙

東京放課後サモナーズ

本尼克

GEYY（盖伊传说）

封装的可能性

<div class="card">可封装成类似以下的模块，让Wikitext更简洁：

{{card|图片|名称}}

{{card
| image = 图片
| name = 名称
| size = 120px
| link = wiki链接
| label = 备注
}}

但经过多次测试，使用封装后的模板，会导致原本的鼠标悬停在图片/文字上显示预览的功能失效，并且点击卡片无法跳转到对应的词条，仅能打开图片并显示图片的备注“Link = 图片”。

MediaWiki中图片悬停预览的工作原理依赖于“图像链接”处理，当直接使用[[文件:...]]语法时，系统会自动生成包含预览信息的链接。

而当图片链接被包裹在模板{{xx}}中时，会因为模板的结构或参数传递问题导致预览功能失效。

笔者并没有找到更好的解决方案，如果有更优秀的解决方案可以在幫助討論:card布局里告诉我！~

源码分析

/* ================= 卡片容器 ================= */
.card-container {
    display: flex;
    flex-wrap: wrap;     /* 允许卡片换行 */
    gap: 20px;          /* 卡片间距 */
    margin: 15px 0;
    padding: 10px;
}

/* ================= 卡片基础样式 ================= */
.card {
	/*  物理动画模拟  */
	transition: 
        transform 0.4s cubic-bezier(0.4, 1.56, 0.64, 1), /* 平滑过渡动画 */
        box-shadow 0.3s ease-out;
    /* 浏览器性能优化  */
    will-change: transform; /* 预告知浏览器可能的变化 */
    transform: translateZ(0); /* 触发GPU加速层 */
    /* 卡片定位  */
    box-sizing: border-box; /* 边框计入元素尺寸 */
    position: relative;/* 相对定位 */
    z-index: 1; /* 建立层级上下文 */
    
    flex: 1 0 calc(14.28% - 20px); /* 7列布局计算(100%/7) */
    min-width: 140px;   /* 最小卡片宽度 */
    max-width: calc(14% - 20px);   /* 最大宽度限制 */
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1); /* 平滑过渡动画 */
    overflow: hidden;    /* 隐藏溢出内容 */
}

/* ================= 卡片悬停状态 ================= */
.card:hover {
	/*  物理动画模拟  */
	box-shadow: 
        0 12px 24px rgba(0,0,0,0.15),
        0 6px 12px rgba(0,0,0,0.1); /* 多层阴影增强立体感 */
        
    
    /* 浏览器性能优化  */
     transform: 
        scale(1.08) 
        translateZ(0); /* 触发GPU加速，保持3D加速连续性 */
	z-index: 2; /* 悬停时提升层级 */
    border: 2px solid blue; /* 选中卡片的蓝色边框 */
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.card:hover p {
    color: blue !important; /* 悬停时字体变色 */
}

/* ================= 卡片图片样式 ================= */
.card img {
    width: 100%;         /* 关键修改：填满容器宽度 */
    height: 140px;
    object-fit: cover;   /* 保持图片比例 */
    border-radius: 12px 12px 0 0; /* 仅顶部圆角 */
    transition: transform 0.3s;
}

/* 悬停时图片缩放（受容器overflow:hidden限制） */
.card:hover img {
    transform: scale(1.1);
}



/* ================= 卡片内容区域 ================= */
.card-content {
    padding: 15px;
    position: relative;
    z-index: 2;          /* 确保内容在上层 */
}