1. 为什么学了HTML还要专门学CSS3一个老前端眼中的美化本质先说个很多新手问过我的问题HTML标签本身有颜色、有大小、有边框属性为什么还要单独学一套CSS这就要回到浏览器底层的工作机制上来。HTML的结构化标签确实带了一些出厂默认样式比如h1天生字号大、b天生加粗、table自带边框但这里有个致命问题这些默认样式既不能跨浏览器保持一致也没有任何设计变量可供调整。你没法让一个h1同时变成红色、带下划线、左对齐并且离上一行间距60像素除非你把它拆成一堆互相嵌套的内联标签——那画面简直不敢看。CSS的出现就是把长得怎么样这件事从HTML结构里彻底剥离出来而CSS3作为第三代标准才真正把美化的天花板打开了。CSS3提升的幅度怎么形容呢如果把CSS2.1比作一台手动挡汽车——功能都有、技术熟练也能开得不错但每换一个档位都要踩离合、费手脚那CSS3就像自动挡加自适应巡航你只需要把方向盘握好剩下的动力分配、弯道控制、跟车距离系统全给你处理了。我举个例子你在CSS2时代想给一个卡片加圆角得准备四张不同角落的切角图片再用background-position拼半天想做一个鼠标悬停慢慢变色的按钮得靠JS定时器不断改颜色值一分钟改二十次。CSS3里一个border-radius: 8px、一个transition: background 0.3s就全搞定了。这就是这一版规范对美化二字的真正解放——它把过去需要用图片模拟和JavaScript硬凑的视觉效果变成了原生的、声明式的CSS属性。所以这篇博文我不打算给你堆一长串API文档而是从如何把一个普通HTML页面一点一点变好看这个实际角度出发把我日常做页面时真正高频使用、一出效果就很明显的CSS3特性都过一遍。你会看到排版层面怎么通过字体、间距、颜色系统让页面产生高级感盒模型相关的新属性怎么把平面布局变成有层次、有光影的卡片界面动画与过渡怎么在不影响性能的前提下给交互加分响应式设计怎么让同一套HTML在手机和电脑上都成立以及几个我踩过跟头、查了很久才搞明白的兼容性细节。目标读者我默认是那种已经认得HTML常用标签、能写一个静态页脚但看到CSS2属性就开始头晕、不知道学完CSS3能干什么的人。如果你是这种状态这篇文章就是为你准备的。2. 排版的质感把文字变成界面的第一步2.1 字体的坑与web font的正确使用方式我见过太多新手做了个页面内容、布局都没得挑但整体看起来就是差点意思。这个差绝大多数情况下都是字体造成的。中文Windows系统默认的字体渲染链路是微软雅黑→宋体→默认无衬线macOS则是苹方→华文黑体。两端显示的笔画粗细、字距、灰度全不一样。更麻烦的是宋体这种衬线字体在字号小于12px时笔画会糊成一团。CSS3里解决办法很直接font-family列表多写几个备选把跨平台的优质字体放前面比如body { font-family: PingFang SC, Microsoft YaHei, Noto Sans CJK SC, sans-serif; }这段声明表示在苹果设备上用苹方Windows上用微软雅黑Linux或某些嵌入式环境退回Noto Sans CJK再不行就交给浏览器默认无衬线。别小看这一行它直接决定了你页面在不同设备上的妆容是否统一。如果你还不满足于系统字体CSS3的font-face规则可以加载自定义字体文件这在前端圈一般叫web font。要提醒的是中文字体一个文件动辄几MB千万别整包往页面上怼。我见过有新人把一个5MB的思源宋体全量挂上去首页首屏直接多出2秒白屏时间用户早跑了。正确的做法是用工具把需要用到的几个汉字或几十个常用字从字体文件中裁出来只加载那几十KB的子集。英文和数字的字体文件本身就很小放心用。2.2 行高、字距和颜色配比那些感觉很对的页面是怎么排出来的排版的质感不只靠字体行高和字距的搭配更关键。CSS3里依然用line-height控制行高但最佳实践是用无单位数字比如line-height: 1.6意思是行高是字体大小的1.6倍。正文文字1.6到1.8的行高读起来最舒适低于1.4就会显得局促高于2.0又会显得松散。这个比例与字体大小自动挂钩所以不管字号怎么变行高比例不用改。标题和正文之间的字距调整在CSS3中用letter-spacing属性这个新手容易忽略。大号标题适当加宽字距比如letter-spacing: 2px到4px会显得更设计感但正文内容千万别加一加字距中文阅读的连贯性就全毁了。再往深一层就是颜色配比我自己的习惯是正文不用纯黑色而是#333或#444这种深灰因为纯黑在白色背景下对比度过高盯着看久了眼睛容易疲劳。标题可以用#111这种接近黑的颜色突出重点辅助说明文字统一用#888或#999。整套下来形成标题-正文-辅助三个灰度层级页面自然就有了秩序感这比在一个页面里堆十种颜色要高级得多。还有一个容易被忽略的排版属性是text-align: justify它能把中文两端对齐让段落右边缘不再参差不齐。CSDN、知乎的正文都这么做的视觉上非常整齐。用的时候注意最后一行不要被强制拉伸配合text-align-last: left使用即可。3. 盒模型美化从电子表格风到卡片化界面的分水岭3.1 border-radius的完整语义四个值分别管哪个角HTML默认的div、section这一类块级元素长得就是个直角矩形没有光影、没有圆角、没有层次。CSS3给盒模型注入的最直观改变是border-radius。很多人只知道border-radius: 8px这种简写但面试或者是实际调样式时你会经常遇到需要单独控制某个角的情况。先记住简写规则的顺序border-radius: 左上 右上 右下 左下。如果只写两个值border-radius: 10px 20px代表左上和右下是10px右上和左下是20px三个值时第一个管左上第二个管右上和左下第三个管右下。对应单独属性分别是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。还有一个很容易拿来炫技的写法border-radius: 50%。百分比是相对元素自身宽度和高度的所以宽高相等的正方形加border-radius: 50%会变成正圆。但如果你在一个长方形上用50%得到的是胶囊形——它的圆角半径会自适应长边的曲率形成一个两端圆、中间直的跑道形状。这个胶囊造型在按钮、标签、头像场景下非常常用比写死像素值更能自适应内容长度变化。还有一个进阶技巧border-radius: 999px在大多数情况下的效果与50%一致但性能开销更小因为浏览器把它理解为能多大就多大而不是按比例算椭圆曲线移动端低端机上会有可感知的性能差异。3.2 box-shadow分层技术一个属性造出卡片的三层立体感如果说圆角是让元素不那么生硬那box-shadow就是让元素浮起来的关键。一个标准的卡片阴影包含五个参数顺序是box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色。其中水平偏移和垂直偏移控制影子方向正数向右向下模糊半径控制影子的柔和程度越大边缘越淡扩散半径控制影子大小正数让影子比元素大一圈负数让影子向内收颜色不用多说。我日常做卡片阴影有一套固定的三层组合这里的三层不是指三个阴影叠加而是我总结出来的三个典型使用场景悬浮感弱box-shadow: 0 1px 2px rgba(0,0,0,0.05)影子非常轻只用于区分元素和背景适合表单输入框这种需要有边界但不抢眼的场景。悬浮感中等box-shadow: 0 4px 8px rgba(0,0,0,0.10)适合卡片默认状态有可感知的浮起高度但不会显得突兀。悬浮感强box-shadow: 0 12px 24px rgba(0,0,0,0.15)适合用户鼠标悬停或选中时的状态配合过渡动画产生卡片被抬起来的交互反馈。这也是很多前端做毛玻璃卡片、拟物按钮的基础配方。要提醒的是rgba里的透明度别直接抄我的值要根据你页面的整体背景色微调。深色背景上阴影几乎不可见需要改用内发光或者增大透明度差值。3.3 渐变背景的配色断点选择linear-gradient与radial-gradient的差异背景是美化页面的大头。CSS3的linear-gradient可以替代过去必须用一张渐变图片的困境而且渐变是矢量生成的放大多少倍都不糊。它最基础的语法是background: linear-gradient(方向, 起始颜色, 结束颜色)。方向可以写to right、to bottom left也可以写角度值如135deg。角度值的0度指向正上方顺时针递增这点容易记混踩过一次坑后建议直接记住135deg一般是从左上扫到右下的直观效果即可。渐变比较好玩的是多断点写法。比如我想做一个模拟天空的渐变background: linear-gradient(180deg, #87CEEB 0%, #B0E0E6 40%, #F0F8FF 100%);这意味着在天蓝色和白色之间插入了一个雾蓝色过渡段颜色的过渡在40%的位置被拉长视觉上更柔和。断点的主要价值是控制颜色切换的节奏三个断点就能组合出很多细腻的天空、水面、金属质感效果完全不需要切图。radial-gradient则是径向渐变从圆心向外扩散适合做光晕、聚光、模拟太阳光照这类效果。用法上它需要定义圆的中心位置比如background: radial-gradient(circle at 50% 30%, #FFD700, #FF8C00)表示在元素水平50%、垂直30%的位置有一个金色光晕向外扩散成橙色。它和linear-gradient放在同一个background属性里还能叠加中间用逗号隔开这在做复杂的多层背景时特别有用——比如给卡片一个浅色线性底、再加一个角落的径向光晕立体感立刻出来了。4. 动效的克制与张力transition和animation的正确使用方式4.1 transition的四个参数拆解别只会写全部0.3秒CSS3的transition是我在交互美化中使用频率最高的属性。它本身能产生渐变过程但很多新手的用法是transition: all 0.3s这确实省事但有两个问题。第一all会让所有发生变化的属性都套用同一个时间曲线包括你不想动画化的属性比如display的切换在某些旧浏览器上会闪屏第二性能开销更大浏览器得为所有变动属性都创建动画帧。我建议无论如何都精确指定要过渡的属性比如button { background: #4A90D9; transform: translateY(0); transition: background 0.3s ease, transform 0.2s ease; } button:hover { background: #357ABD; transform: translateY(-2px); }这样鼠标悬停时背景色在0.3秒内渐入新颜色按钮同时浮起2像素两者互不干扰。transition四个参数分别是属性名、持续时间、时间函数、延迟时间。时间函数里最常用的是ease慢起慢收适合常规状态变化、linear匀速适合颜色变化、cubic-bezier(0.34, 1.56, 0.64, 1)回弹感适合小球弹跳类的趣味动效。延迟参数使用场景很具体比如你希望子元素依次入场时给每个设置不同的transition-delay会形成一种波浪式浮现效果。4.2 transform的坐标系translate/rotate/scale的偏移与参照原点transform是CSS3里另一大美化引擎它可以对元素做平移、旋转、缩放、倾斜。很多教程只告诉你语法我来讲讲坐标系和参照原点这两个容易栽跟头的地方。transform的坐标系默认以元素的中心点为原点水平向右是X轴正方向垂直向下是Y轴正方向。translateX(50px)是把元素沿X轴正方向即右方移动50pxrotate(45deg)是以中心点为轴顺时针旋转45度scale(1.2)是整体放大1.2倍。你可以用transform-origin修改旋转或缩放的原点比如设置transform-origin: left center旋转时元素就会绕左边缘转而不是绕中心转。新手最常犯的错是把transform和left/top混用。left/top改变元素位置时性能很差因为它会导致浏览器重新计算整个文档流布局而transform的位移只影响合成层性能好一个数量级。所以做位置动画务必用transform: translateX(...)而不是left: 100px。另外多个变换要写在一行里用空格分隔transform: translateX(10px) rotate(8deg) scale(1.02)。顺序不同结果也不同原理是这些变换会按从右往左的顺序应用到元素上实际项目里我建议把translate放最前面它先改变位置后面再旋转缩放就不会因为中心点移动而产生意外的偏移。4.3 animation的keyframes生命周期如何在页面加载时自动播放数字滚动热搜词里有css3 元素可见时 数字展示这是个很典型的需求。实现数字滚动你可以用JS去改值但纯CSS也能做出一版顺滑的入场数字动画核心是keyframes规则加animation属性。keyframes定义动画的关键帧比如数字从0滚到100keyframes count-up { from { --num: 0; } to { --num: 100; } }不过CSS原生还不能直接驱动数字内容通常的做法是用counter()配合content或者在animation里控制一个伪元素从底部滑入。一个更省事的实战方案是用CSS变量配合steps()来做跳帧滚动效果。这里贴个简单可行的方案div classcounter>.counter::before { content: counter(num); animation: count 2s steps(100) forwards; } .counter { counter-reset: num 0; }更彻底地我推荐一个我一直用的套路给数字外面包一层overflow: hidden容器内部数字用transform: translateY(100%)起步动画结束时translateY(0)配合steps()函数就能模拟出数字一格一格往上跳的老式机械翻牌效果。animation的核心参数是动画名、时长、时间函数、延迟、播放次数、方向、填充模式。forwards这个填充模式特别重要——如果不写它动画结束后元素会跳回到动画前的状态。4.4 动效性能三原则合成层、will-change与减少重绘动效最忌讳的是掉帧。掉帧的元凶是重排——浏览器每帧都要重新计算元素的位置和大小。CSS3里有两个属性被证明是合成器友好型的transform和opacity。它们的变化只触发合成层的重新绘制不影响其他元素的布局所以手机浏览器上也能跑出60fps。换句话说能用transform和opacity做动画就别去动width、height、margin这些触发重排的属性。will-change属性可以提前告诉浏览器这个元素接下来要动画了先给它准备一个合成层比如will-change: transform能减少动画首帧的卡顿。但别滥用一个页面十几个元素都加上浏览器内存会暴涨。我的习惯是在可能触发动画的元素上只在交互即将开始时加交互结束即移除配合JS来做。另外动画时长也别太离谱。界面动效控制在150ms到500ms之间比较自然少于100ms用户感知不到过渡多于800ms就会觉得页面拖沓。5. 响应式美化一套HTML在手机和电脑上都体面的正确姿势5.1 媒体查询的断点策略不是所有设备都要一套样式CSS3的媒体查询用media规则实现它可以根据视口宽度、分辨率、甚至用户偏好应用不同样式。最常用的是宽度断点media (max-width: 768px) { .card { border-radius: 4px; box-shadow: none; } }这个意思是在视口宽度小于等于768px时卡片圆角减小、去掉阴影因为小屏幕上阴影占视觉权重太大反而显得脏。断点怎么定我建议不要盲目照搬Bootstrap那套480、768、992、1200的刻度——那些数值来自历史原因未必匹配你的实际内容。更科学的做法是用手拖浏览器窗口看你的布局在哪个宽度开始挤压变丑就在那个宽度前后设断点。真正优秀的响应式不是每种设备一套设计而是设计能随空间自动流动。CSS3提供了更优雅的方案比如多列布局column-width、弹性盒子的flex-wrap、网格布局的auto-fill等它们让元素自己对宽度变化做出反应。断点的作用只是在极端情况下兜底修正。5.2 弹性盒子辅助下的卡片自适应伸缩display: flex虽然不是CSS3新创但CSS3完善了它的很多细节比如flex-wrap、flex-grow、flex-shrink、flex-basis等属性。这些属性让卡片在容器内自动伸缩成为可能。一个典型的三列卡片布局我在CSS2时代得靠float加clearfix实现现在一行flex就搞定.card-container { display: flex; flex-wrap: wrap; gap: 16px; } .card { flex: 1 1 240px; }flex: 1 1 240px三个值分别对应flex-grow放大比例、flex-shrink缩小比例、flex-basis基础宽度。当容器宽度充足时卡片按比例分配剩余空间当空间不足时卡片自动收缩到不小于240px再不够就换行。这套机制让卡片组在从手机到桌面的任何宽度下都能自适应排布配合媒体查询微调间距即可完成响应式。5.3 viewport单位与rem字号为什么移动端字喜欢用vw/vh和rem响应式不只是布局的事字号和间距也必须跟着设备走。CSS3引入的视口单位vw、vh、vmin、vmax可以直接按视口尺寸定值。1vw等于视口宽度的1%所以font-size: 4vw的文字在小屏幕手机上大约是16px左右在桌面显示器上能到50px以上。不过直接拿vw做字号有个毛病中间档位很尴尬1920px宽的屏幕上3vw是57px在笔记本1280px宽上是38px两档落差过大。稳妥方案是clamp()函数font-size: clamp(16px, 2vw 12px, 24px);它表示字号最小16px、最大24px中间值由2vw加12px计算得出随着视口宽度在两端之间平滑变化。这也是我在文章页里最喜欢用的字号控制方式。间距同理padding: clamp(12px, 3vw, 32px)让卡片内边距随屏幕变化但不至于太挤或太空。根元素字号的设置可以用html { font-size: clamp(14px, 1vw 10px, 18px); }然后全站用rem做单位这样整个页面的比例系统会随屏幕大小舒展缩放。6. 一次完整的表单美化把热搜里的表单标签做成高端界面6.1 表单原生控件的痛点与CSS3的改头换面热搜词里有html表单和html——表单类的标签正好拿表单做一个综合案例。原生input、select、textarea在不同浏览器里长得很不一样它们被称为不可控控件因为很多样式属性对它们无效。CSS3解决了其中一部分例如appearance属性可以去掉控件默认的外观input[typecheckbox] { appearance: none; width: 18px; height: 18px; border: 2px solid #ccc; border-radius: 4px; outline: none; cursor: pointer; transition: background 0.2s, border-color 0.2s; } input[typecheckbox]:checked { background: #4A90D9; border-color: #4A90D9; }去掉appearance之后复选框变成纯CSS画出来的矩形:checked伪类可以让我在选中时切换背景色。这个方案兼容性足够好也是当前主流UI库的实现思路。输入框的聚焦状态用:focus伪类美化通常加一个border-color变化和轻微的box-shadow光晕即可。6.2 表单交互细节placeholder、focus-within和校验状态反馈表单里容易被忽略的细节是placeholder的样式。CSS3的::placeholder伪元素可以单独设置提示文字的字体大小、颜色、透明度input::placeholder { color: #aaa; font-size: 14px; }还有:focus-within这个不那么热但很好用的伪类。它的作用是当元素内部的任何后代元素获得焦点时本元素应用样式。我常用它做焦点时整个表单卡片边框发光的效果——光标点进任何一个输入框整个卡片边框都亮起来用户一眼就知道自己正在填写哪一块。校验状态可以用:valid、:invalid这两个伪类配合HTML5的required、typeemail等属性。当输入内容符合规则时输入框边框自动变绿不符时变红。这是纯CSS做的表单实时校验反馈不需要任何JS。6.3 全套表单美化示例从label到提交按钮的设计节奏我把上面这些技巧整合成一个小示例。假设你要做一个注册表单卡片.form-card { max-width: 420px; margin: 40px auto; padding: 32px; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .form-card label { display: block; margin-bottom: 6px; font-size: 14px; color: #444; } .form-card input { width: 100%; padding: 10px 12px; margin-bottom: 16px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; transition: border-color 0.2s, box-shadow 0.2s; } .form-card input:focus { border-color: #4A90D9; box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.2); outline: none; } .form-card .submit-btn { width: 100%; padding: 12px; border: none; border-radius: 6px; background: #4A90D9; color: #fff; font-size: 16px; cursor: pointer; transition: background 0.2s, transform 0.1s; } .form-card .submit-btn:hover { background: #357ABD; } .form-card .submit-btn:active { transform: scale(0.98); }大概就是标签用label块级化输入框有聚焦光晕提交按钮悬停变色、按下时轻微缩小这个按压缩放反馈虽然只有2%但手感会很明显。表单美化的关键不在于一个个控件单独多好看而在于它们在同一套圆角、间距、颜色体系下形成协调节奏。我用的是6px圆角放输入框、12px圆角放卡片、6px圆角放按钮整体统一又各有层次颜色上主色一个蓝色系贯穿焦点态、按钮、选中态不会让用户觉得花哨。7. 我踩过的CSS3兼容性坑位细节写在最后一节的大实话7.1 为什么 transform 里的一行空格不能乱加transform这个属性有个很特殊的语法要求值之间必须用空格分隔但你如果在rotate(45deg)的deg和左括号之间、或者数值与单位之间多打了空格在标准浏览器里可能没问题在某些旧内核浏览器里会直接让整条声明失效。更常见的问题是translateX和translateY混用场景有人写成transform: translateX(20px) translateY(10px)没事但写成transform: translate(20px, 10px)时第二个坐标在某些老浏览器里被解析成translateY(0)元素位置不对却查不出原因。我的教训是能用单函数就用单函数需要组合时统一用translate(x, y)形式并严格按官方压缩格式书写。7.2 border-radius的百分比和像素混用陷阱之前讲了border-radius: 50%在长方形元素上会形成胶囊形。这里有个隐藏陷阱如果你给border-radius简写里同时混用百分比和像素比如border-radius: 50% 8px它分别代表左上右下取50%、右上左下取8px视觉上可能极其怪异。另一种情况是元素尺寸由内容撑开、不确定时用百分比做圆角可能导致圆角忽大忽小内容一多就不圆了。设计头像这类固定尺寸元素可以用百分比设计按钮这类随内容变化就得用像素值。7.3 渐变中的颜色断点和透明度的坑linear-gradient里每个断点位置可以写0%、40%、100%也可以省略百分比让浏览器自动均分。省略省事但如果你中途插入一个新颜色自动均分的结果可能偏离你的本意。比如background: linear-gradient(to right, red, blue, green);因为没写断点三种颜色会各占三分之一但如果你希望蓝色只占中间一点、绿色铺开更多就必须显式写red 0%, blue 20%, green 100%。透明度的坑则是rgba(0,0,0,0)和transparent在渐变的中间帧看起来一样但在某些浏览器里对渐变插值的处理有细微差异会出现颜色闪一下再淡出的问题。统一用rgba写最稳。7.4 移动端常见三个看起来像坏了的问题与对策移动端有几个高频症状我第一次遇到差点以为是浏览器bug。第一个是100vh在iOS上的地址栏收起后元素底部超出屏幕。解决方法是不用100vh改用100dvh或配合JS动态设置。第二是按钮点击时出现灰色半透明闪层那是iOS Safari默认的-webkit-tap-highlight-color加上* { -webkit-tap-highlight-color: transparent; }就能消灭。第三是position: fixed在弹窗里会跟随滚动失效这和CSS3的transform滥用有关——如果弹窗的某个祖先元素加了transformfixed就变成相对于那个祖先定位。排查这个问题时先看有没有祖先元素带transform属性。7.5 关于美化过度的最后一个善意的提醒把页面做花哨其实是最容易的事把页面做得安静、体面、有重点才难。我早期刚学会box-shadow和渐变的那些天恨不得每个方块都拉满阴影结果整个页面像贴满了塑料反光条的玩具车。后来我看了一些设计规范很严的产品页面才意识到真正的美化是用样式去服务内容——关键信息用对比度突出次要信息默默退后动效只在交互反馈时出现。CSS3给了你极大的自由你要做的其实是学会克制地使用它。8. 把美化落到一个完整示例卡片列表页的CSS3整合实战前面拆解了这么多特性这里我做一次整合。假设HTML里有一个文章卡片列表结构大概是这样section classpost-list article classpost-card h3 classpost-title如何优化网页加载速度/h3 p classpost-excerpt性能优化是前端工程师迈不过去的坎这篇文章总结了我常用的几个手段……/p span classpost-meta发布于 2024-12-01 · 阅读 3 min/span /article article classpost-card.../article article classpost-card.../article /sectionCSS3美化步骤按优先级操作第一步给容器设置display: flex; flex-wrap: wrap; gap: 20px让卡片在980px内一列排布、以上自适应多列第二步给post-card设置flex: 1 1 280px、padding: 24px、border-radius: 12px、box-shadow: 0 2px 8px rgba(0,0,0,0.06)第三步给标题加font-size: clamp(18px, 2vw, 24px)和letter-spacing: 0.5px给摘要加line-height: 1.7和color: #555给元信息加color: #999和font-size: 13px第四步给卡片加悬停交互.post-card { transition: transform 0.2s, box-shadow 0.2s; } .post-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.12); }这里我特别说明一个细节悬停时把transform和box-shadow一起过渡元素整体上浮4px、阴影放大加深视觉上很自然地模拟出被手指轻轻抬起的效果。为什么只上浮4px而不是10px因为10px的位移会让用户觉得卡片飘得太高和背景之间缺乏连接感4px正好在可感知和自然的临界点上。首页加载时想让卡片依次淡入可以给每张卡片加一个animation并利用transition-delay做不到、但animation-delay可以做到的延迟错峰。比如给第1张卡设animation-delay: 0s第2张0.1s第3张0.2s。具体到实践中你可以在模板里动态计算索引值生成animation-delay也可以手写三个类名。延迟间隔别超过0.15s超过之后后边的卡片半天不出现用户会产生页面没加载完的错觉。最后插一个我认为很重要的原则卡片列表做阴影交互时默认状态和悬停状态的阴影差距一定要拉开否则过渡动画看起来像没做一样。我用0 2px 8px到0 12px 24px这个差距模糊半径从8到24、扩散半径从2到12用户能明显感觉到卡片被拿起来了但又不会刺眼。我的个人体会是CSS3的美化并不是某一个属性的魔法而是字体、间距、圆角、阴影、渐变、动效、响应式这些手段在同一个设计语言下互相配合的结果。你完全可以把上面这些段落当成一个工具箱先按着示例做出一版自己的卡片列表再试着改改颜色、断点、动画时长找到那套属于你自己审美的参数组合。这个调参找到感觉的过程比背下所有CSS3属性值有用得多。