frontend-css-patterns

用途

Frontend CSS Patterns 是一套与框架无关的 CSS 实现模式，目标是帮助开发者做出具有辨识度的视觉设计，而不是停留在通用默认样式上。它把设计意图拆解为排版、色彩与主题、动效、空间构图、视觉细节等几个可复用的部分，并给出对应的 CSS 代码片段。

主要能力

排版

提供字体搭配的思路与示例变量：避免使用 Inter、system-ui 这类通用默认字体，转而采用更具个性的组合，例如展示字体使用 'Clash Display'、'Space Grotesk'，正文字体使用 'Satoshi'、'General Sans'。同时给出针对特定气质的字体变量，如奢华风格使用 'Cormorant Garamond' 衬线体、粗野主义风格使用 'JetBrains Mono' 等宽体、活泼风格使用 'Fredoka'、'Quicksand'。

排版尺度方面，使用 clamp() 定义从 hero 到正文的响应式字号层级：

:root {
  --text-hero: clamp(3rem, 10vw, 8rem);
  --text-display: clamp(2rem, 5vw, 4rem);
  --text-heading: clamp(1.5rem, 3vw, 2.5rem);
  --text-body: clamp(1rem, 1.5vw, 1.125rem);
}

色彩与主题

建议采用高对比度、有限色板（3 到 4 种颜色）以及突出的强调色。示例变量包括背景色、前景色、强调色及其半透明变体：

:root {
  --color-bg: #0a0a0a;
  --color-fg: #fafafa;
  --color-accent: #ff3366;
  --color-accent-muted: #ff336633;
}

动效

强调把精力放在高冲击力的时刻，而不是零散的微交互。示例使用 fadeInUp 关键帧实现淡入上移，并通过 nth-child 设置递增的 animation-delay 形成序列感。建议关注的重点包括：页面加载序列、滚动触发的显现效果、状态过渡。

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  animation: fadeInUp 0.6s ease-out forwards;
}

.reveal:nth-child(1) { animation-delay: 0.1s; }
.reveal:nth-child(2) { animation-delay: 0.2s; }

空间构图

提出打破网格的几种手法：非对称（有意偏移元素）、重叠（通过层叠制造深度）、对角线流向（动态引导视线）、留白（让内容有呼吸感）。示例通过相对定位让 hero 图片向上重叠页头、向右超出容器：

.hero-image {
  position: relative;
  top: -5vh;      /* Overlap the header */
  right: -2rem;   /* Extend past container */
}

视觉细节

提供渐变叠加与发光效果的实现方式。渐变叠加通过伪元素覆盖卡片，使用 linear-gradient 制造光泽，并设置 pointer-events: none 避免影响交互；发光效果通过多层 box-shadow 使用强调色的半透明变体实现。

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.05));
  pointer-events: none;
}

.accent-element {
  box-shadow: 0 0 20px var(--color-accent-muted), 0 0 40px var(--color-accent-muted);
}

Tailwind 自定义

给出在 tailwind.config.js 中扩展主题的示例，包括自定义 fontFamily 与 colors，强调不要直接使用默认主题：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: { display: ['Clash Display', 'sans-serif'] },
      colors: { brand: { DEFAULT: '#ff3366', muted: 'rgba(255, 51, 102, 0.2)' } },
    },
  },
}

使用方式

资料以代码片段和设计建议的形式呈现，未提供安装命令、包管理方式或具体调用步骤。使用者可按需将上述 CSS 变量、关键帧、伪元素样式与 Tailwind 配置片段复制到自己的项目中，并根据实际设计目标调整字体、颜色与数值。

适用场景

适合前端开发者在构建网站界面时参考，尤其是希望摆脱通用默认样式、追求更强视觉个性的项目。由于内容与框架无关，可用于原生 CSS 项目，也可结合 Tailwind 使用。

限制

资料未说明所引用字体（如 Clash Display、Satoshi 等）的获取方式与授权情况，也未提供浏览器兼容性、性能影响或无障碍方面的说明。是否收费、价格、平台支持等信息暂未提供。