功能特性卡片区块
SaaS/Notes 信息部分。 UI结构UI结构，时间已经到了停止的时候，柔和的灯光已经完成了。
HTMLCSS
预览
六张功能卡呈网格排列，悬停时渐变边框会亮起。
Features
一切都在这里
高速处理
以毫秒为单位的响应。
安全
零信任架构。
分析
实时洞察。
协作
作为一个团队无缝地在一起。
全球
在全球 148 个国家/地区发售。
定制
可定制以适合您的品牌。
用例和功能
-
SaaS/Landing Page：功能介绍部分，清晰传达产品的吸引力。
-
不需要 JavaScript：纯 CSS 实现，包括悬停效果。
-
使用 CSS 变量对卡片进行颜色编码：使用
--card-color变量集中管理每张卡片的边框颜色。 -
蒙版复合边框效果：悬停时渐变边框清晰可见。
设计和用户体验要点
-
通过图标进行视觉传达：图标即时传达每张卡片的内容。
-
translateY(-4px)提升：精致的体积感，不是太深，而是轻飘飘的。 -
不透明度：0 → 1边框：悬停时第一次出现的边框创造出惊喜的体验。
如何定制
更改卡片数量：只需在“feat-grid”中添加/删除“.feat-card”元素即可。
改变边框颜色:
.feat-c1 { --card-color: #f97316; } /* 橙色 */
修复网格列数:
.feat-grid { grid-template-columns: repeat(3, 1fr); }
实现代码
<section class="feat-section">
<div class="feat-header">
<div class="feat-eyebrow">Features</div>
<h2 class="feat-title">一切都在这里</h2>
</div>
<div class="feat-grid">
<div class="feat-card feat-c1">
<span class="feat-icon">⚡</span>
<h3 class="feat-card-title">高速处理</h3>
<p class="feat-card-desc">以毫秒为单位的响应。</p>
</div>
<div class="feat-card feat-c2">
<span class="feat-icon">🛡️</span>
<h3 class="feat-card-title">安全</h3>
<p class="feat-card-desc">零信任架构。</p>
</div>
<div class="feat-card feat-c3">
<span class="feat-icon">📊</span>
<h3 class="feat-card-title">分析</h3>
<p class="feat-card-desc">实时洞察。</p>
</div>
<div class="feat-card feat-c4">
<span class="feat-icon">🤝</span>
<h3 class="feat-card-title">协作</h3>
<p class="feat-card-desc">作为一个团队无缝地在一起。</p>
</div>
<div class="feat-card feat-c5">
<span class="feat-icon">🌍</span>
<h3 class="feat-card-title">全球</h3>
<p class="feat-card-desc">在全球 148 个国家/地区发售。</p>
</div>
<div class="feat-card feat-c6">
<span class="feat-icon">🔧</span>
<h3 class="feat-card-title">定制</h3>
<p class="feat-card-desc">可定制以适合您的品牌。</p>
</div>
</div>
</section>
<style>
.feat-section {
padding: 4rem 1rem;
font-family: system-ui, -apple-system, sans-serif;
color: white;
background: #0f172a;
box-sizing: border-box;
width: 100%;
}
.feat-section * { box-sizing: border-box; }
.feat-header {
text-align: center;
margin-bottom: 3rem;
}
.feat-eyebrow {
color: #6366f1;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.feat-title {
font-size: 2.5rem;
font-weight: 800;
margin: 0;
}
.feat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 1.5rem;
max-width: 1000px;
margin: 0 auto;
}
.feat-card {
position: relative;
background: rgba(255, 255, 255, 0.03);
border-radius: 1rem;
padding: 2rem;
text-align: center;
transition: transform 0.3s ease;
z-index: 1;
}
.feat-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(135deg, var(--card-color, #6366f1), transparent);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.feat-card:hover {
transform: translateY(-4px);
}
.feat-card:hover::before {
opacity: 1;
}
.feat-icon {
font-size: 2.5rem;
display: block;
margin-bottom: 1rem;
}
.feat-card-title {
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 0.5rem;
}
.feat-card-desc {
color: #9ca3af;
margin: 0;
line-height: 1.5;
}
.feat-c1 { --card-color: #f97316; }
.feat-c2 { --card-color: #3b82f6; }
.feat-c3 { --card-color: #10b981; }
.feat-c4 { --card-color: #8b5cf6; }
.feat-c5 { --card-color: #ec4899; }
.feat-c6 { --card-color: #06b6d4; }
</style>浏览器兼容性状态
|浏览器 |兼容性状态 |
|--------|--------|
| Chrome 80+ | ✅ 完全兼容 |
|火狐浏览器 99+ | ✅ 完全兼容 |
| Safari 15.4+ | ✅ 兼容 |
|边缘 80+ | ✅ 完全兼容 |