如何使用纯CSS实现一张纪念卓别林的卡片（附源码）

卓别林是电影史上最经典的喜剧大师，他头戴圆顶礼帽、留着标志性小胡子、拄着手杖的形象早已深入人心。这篇文章我们就用纯CSS来画一张致敬卓别林的纪念卡片，全程不借助任何图片素材，也不用一行JavaScript，只靠盒模型、渐变、圆角和阴影这些基础属性，把这位大师的经典形象搬上浏览器。做完之后你还会得到一个带悬停动画的完整作品，可以直接放进自己的作品集里。

一、搭建卡片整体结构与配色方案

先把HTML骨架准备好。整张卡片我们用一个.card容器承载，内部再分为三个区域：上半部分是绘制卓别林形象的.scene舞台区，中间是标题文字.title，底部放一句他的经典名言。结构非常简单，复杂的工作全部交给CSS完成。

<div class="card">
  <div class="scene">
    <div class="film-frame"></div>
    <div class="chaplin">
      <div class="hat">
        <div class="hat-brim"></div>
      </div>
      <div class="face">
        <div class="eyebrow left"></div>
        <div class="eyebrow right"></div>
        <div class="eye left"></div>
        <div class="eye right"></div>
        <div class="mustache"></div>
      </div>
      <div class="bowtie"></div>
      <div class="cane"></div>
    </div>
  </div>
  <h2 class="title">Charles Chaplin</h2>
  <p class="quote">A day without laughter is a day wasted.</p>
</div>

配色上要突出黑白默片的时代感。整个卡片以米黄色纸张色作为底色，模拟老照片的泛黄效果，人物部分则全部使用黑色、深灰与白色三个层次。米黄底色不用纯色，而是用两层渐变叠加：一层线性渐变模拟纸张的明暗过渡，一层径向渐变在中心位置提亮，形成聚光灯打在人物身上的舞台效果。这种渐变叠加的手画背景比单色背景质感好很多，建议在类似的复古风格项目里都尝试一下。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #2b2b2b;
  margin: 0;
}

.card {
  width: 360px;
  padding: 28px 24px 32px;
  background:
    radial-gradient(circle at 50% 38%, #f5ecd7 0%, #e8dcc0 55%, #d6c8a5 100%);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
}

二、绘制礼帽、脸庞与小胡子

卓别林最标志性的三个元素是圆顶礼帽、浓眉和方形小胡子。礼帽分成帽筒和帽檐两部分来画：帽筒用一个带圆角的矩形，通过border-radius: 45% 45% 12% 12%让顶部呈现圆润的弧度；帽檐则是一个扁平的椭圆，叠放在帽筒底部。脸是一个竖向椭圆的浅肤色区域，这里为了保持黑白片风格，用偏灰的白色代替真实肤色。

两道浓眉是造型的灵魂。卓别林的眉毛又浓又挑，用两段旋转过的小圆角矩形来表现，分别设置transform: rotate()让它们呈八字上挑的形状。小胡子是整个形象辨识度最高的部分，它是一块方正的深色块，我们用一个矩形加较大的圆角值，再配合轻微的旋转角度，就能还原那种微微上翘的感觉。眼睛则简单处理成两个黑色小圆点，配合眉毛的位置错开一点，神韵立刻就出来了。

.chaplin {
  position: relative;
  width: 160px;
  height: 230px;
  margin: 0 auto;
}

.face {
  position: absolute;
  top: 62px;
  left: 50%;
  width: 104px;
  height: 128px;
  transform: translateX(-50%);
  background: #f2efe6;
  border-radius: 48%;
}

.hat {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 64px;
  height: 44px;
  transform: translateX(-50%);
  background: #1c1c1c;
  border-radius: 45% 45% 12% 12%;
  z-index: 3;
}

.hat-brim {
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 116px;
  height: 16px;
  transform: translateX(-50%);
  background: #1c1c1c;
  border-radius: 50%;
}

.eyebrow {
  position: absolute;
  width: 26px;
  height: 6px;
  background: #1c1c1c;
  border-radius: 4px;
  top: 34px;
}

.eyebrow.left  { left: 16px;  transform: rotate(18deg); }
.eyebrow.right { right: 16px; transform: rotate(-18deg); }

.eye {
  position: absolute;
  top: 48px;
  width: 8px;
  height: 8px;
  background: #1c1c1c;
  border-radius: 50%;
}

.eye.left  { left: 32px; }
.eye.right { right: 32px; }

.mustache {
  position: absolute;
  top: 82px;
  left: 50%;
  width: 46px;
  height: 13px;
  transform: translateX(-50%) rotate(-2deg);
  background: #1c1c1c;
  border-radius: 8px 8px 10px 10px;
}

这里有个小技巧值得注意：五官全部用position: absolute定位在脸的内部，以脸为定位参照物，而不是以整个卡片为参照。这样做的好处是，以后无论你怎么移动或缩放整个人物，五官之间的相对位置都不会乱，维护起来轻松很多。调整神态时只需要微调眉毛的旋转角度和眼睛的间距，多试几个数值对比效果。

三、领结、手杖与胶片边框装饰

脸部下方添一个黑色领结，让人物立刻精神起来。领结用两个旋转过的小三角形状拼成，最省事的做法是利用border画三角形：左右两个方向相反的三角形，中间加一个小方块作为结心。手杖则是两段细长矩形，竖直的杖身加一个弯头，把弯头部分旋转九十度叠在顶端即可。手杖放在人物右侧略微倾斜，用transform: rotate(8deg)产生随意倚靠的姿态。

.bowtie {
  position: absolute;
  top: 196px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: #1c1c1c;
}

.bowtie::before,
.bowtie::after {
  content: "";
  position: absolute;
  top: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  width: 0;
}

.bowtie::before {
  left: -14px;
  border-right: 14px solid #1c1c1c;
}

.bowtie::after {
  right: -14px;
  border-left: 14px solid #1c1c1c;
}

.cane {
  position: absolute;
  right: 6px;
  top: 60px;
  width: 7px;
  height: 165px;
  background: #1c1c1c;
  border-radius: 4px;
  transform: rotate(7deg);
}

.cane::before {
  content: "";
  position: absolute;
  top: -14px;
  left: -12px;
  width: 22px;
  height: 7px;
  background: #1c1c1c;
  border-radius: 4px;
}

为了让卡片更有电影感，我们在舞台区左右两侧加一排胶片穿孔。胶片孔可以用repeating-linear-gradient纵向重复渐变一行搞定，比一个个写div高效得多：渐变里用透明与黑色的交替色块模拟出均匀分布的方形孔洞。再配合::before和::after伪元素分别放在左右两侧，代码量极少。

.scene {
  position: relative;
  padding: 26px 34px;
  border: 3px solid #1c1c1c;
  border-radius: 8px;
  overflow: hidden;
}

.scene::before,
.scene::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 12px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 10px,
    #1c1c1c 10px 20px
  );
}

.scene::before { left: 8px; }
.scene::after  { right: 8px; }

四、文字排版与悬停动画收尾

文字部分走复古印刷风。标题用衬线字体并加字间距，下方名言用斜体小字号，配合上下两条细分割线，模拟老电影海报的字幕卡。颜色统一用深墨色，与人物部分呼应。注意名言末尾的句号前面留一个空格是英文排版习惯，中文项目里不必模仿。

最后加一点交互反馈。鼠标悬停在卡片上时，让手杖轻轻摆动、卡片整体上浮并加深阴影，动效幅度不要太大，两个关键帧的摆动动画配ease-in-out缓动即可，持续两秒无限循环。这种克制的动画能让人会心一笑，又不会喧宾夺主。

.title {
  margin: 22px 0 6px;
  font-size: 22px;
  letter-spacing: 3px;
  color: #1c1c1c;
}

.quote {
  margin: 0;
  font-style: italic;
  font-size: 13px;
  color: #4a4235;
  padding-bottom: 4px;
  border-bottom: 1px solid #b9a97f;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.55);
  transition: all 0.35s ease;
}

.card:hover .cane {
  animation: swing 2s ease-in-out infinite;
}

@keyframes swing {
  0%, 100% { transform: rotate(7deg); }
  50%      { transform: rotate(12deg); }
}

到这里整张卡片就完成了。整个实现过程没有用到任何高级特性，核心就是定位、圆角、渐变、伪元素和变换这几样基本功的组合。如果你是CSS初学者，强烈建议照着敲一遍再尝试改造：比如给人物加一顶可以点击换的帽子、把配色换成深色胶片风，或者用clip-path重写胡子的造型，每一处改动都是对造型能力的锻炼。完整源码把上面几段CSS拼在一起即可直接运行，动手试试吧。

纯CSSCSS卡片卓别林卡片修改时间：2026-09-12 18:46:43