暗酒红的背景上摆着三只橙子：两只完整的一大一小，中间是一枚切开的半橙，能看到白色的中络和放射状的囊瓣，果皮的厚度也清清楚楚。三只橙子都在轻轻动——完整的那两只在有弹性地上下弹跳，落地时会压扁、起跳时会拉长；切开的那半只则只是缓慢地“叹气”般起伏；果肉边缘不时渗出一滴汁水滑落，落到地上溅开几点。地面的椭圆投影跟着橙子的高度同步收放。
整幅画面没有用任何图片、SVG 或 Canvas，只有一堆 div 和 CSS。最见功力的是果皮那层细密的麻点纹理——它是用两组重复线性渐变交叉出来的。
这幅 CSS 插画的四个看点
果皮麻点是渐变交叉出来的。一层竖向的重复渐变加一层横向的重复渐变叠在一起，交点处露出深色，就形成了均匀的凹点阵列，再复制一层错开 5 像素、半透明叠上去，麻点立刻有了深浅层次。
体积感靠一层内阴影。一个从中心透明到边缘变暗的径向渐变盖在球体上，尺寸比本体大出两成并对齐右下——于是光从左上来，右下自然变暗。
弹跳动画做了挤压与拉伸。关键帧里横纵缩放是反向变化的：起跳时变瘦变高，落地时变扁变宽，这是传统动画里最基本也最有效的一条原则。
三段动画各有节奏且刻意错开。大橙子、小橙子、半橙的周期分别是不同的秒数，并用负延迟把它们的相位打散，避免整齐划一的机械感。
三个把“假水果”画像的技巧
其一，麻点纹理的关键在渐变的转向角。第一层用四分之一圈的角度值做横向条纹，第二层默认竖向，两层叠加后仅在特定位置露出底色。写法大致是这样：
repeating-linear-gradient(0.25turn, transparent 0px, #ff9810 4px, #ff9810 10px)
用 turn 而不是 deg 是个小巧思，读代码时“四分之一圈”比“90 度”更直观。调整那几个像素值可以改变麻点的疏密与大小——数值越接近，点越细；差值拉大，纹理就会从麻点变成网格。
其二，切面用的是“遮罩 + 溢出隐藏”而不是画半圆。半橙的果皮部分是一个完整的圆，装在一个只有一半高度、开启溢出隐藏的容器里，于是自然被切成半圆；内部的果肉、中络、囊瓣则是另一组元素叠上去。这种做法比直接用半圆边框好改：想换切角只要旋转容器。
其三，投影是独立元素而不是盒阴影。橙子在弹跳时投影需要独立地缩放——橙子跳得越高，影子应该越小越淡。源码给投影单独写了一段收缩动画，与弹跳同周期但缩放规律不同。这是让弹跳“落地有声”的关键，用盒阴影绑定在球体上是做不到的。
拿到源码后能改什么
换颜色最省事：果肉与果皮的主色是同一个橙色，全局替换即可变成柠檬黄、青柠绿或血橙红；麻点的深色、内阴影的浓度各有一处。背景是一圈径向渐变，改两个色标就能从酒红换成任意基调。
尺寸由一个基准像素值推导，两只橙子的大小、位置、投影位置都基于它计算。想放大整体，最稳妥的方式是给最外层容器加一个缩放变换，而不是逐个改数值。
动画节奏在四段关键帧里：弹跳、叹气、收缩、滴汁。想让画面更安静，把弹跳的位移幅度改小、周期拉长即可；想做加载动画，可以只保留一只橙子加弹跳与投影收缩，删掉其余部分，代码量会小很多。
运行提示：整页零脚本、零图片，可直接双击 index.html 打开。所用的重复渐变、径向渐变与关键帧动画在主流浏览器上支持良好；字体从网络加载，加载失败仅影响左上角标题的字形。建议使用近两年版本的 Chrome、Edge、Firefox 或 Safari。详细运行方法请参见压缩包内的帮助文档。
关于这幅 CSS 橙子的常见问题
能改成别的水果吗？
可以。苹果、桃子改颜色和蒂梗形状即可；柠檬需要把正圆改成椭圆并加两个尖端；西瓜则要重画切面的条纹。果皮的麻点纹理对柑橘类最贴切，画表皮光滑的水果时建议把它去掉，只留内阴影和高光。
元素这么多会不会影响性能？
整幅画面只有几十个元素，动画只改变变换属性，属于合成层内的廉价操作，即使在低端设备上也很流畅。真正需要留意的是重复渐变在超大尺寸下的绘制成本，铺满全屏时建议改用一次性绘制的静态背景。
手机上会不会跑版？
当前布局用的是百分比加固定像素的混合定位，窄屏下橙子可能被裁到边缘。建议给最外层加一个按视口宽度缩放的变换，比逐条改媒体查询省事得多。
可以做成鼠标悬停才动的吗？
可以，把几个动画类改成只在悬停状态下生效即可。注意投影的收缩动画要和橙子的弹跳同时触发，否则会出现影子不动而橙子起跳的穿帮。
它适合用在什么地方
这类纯 CSS 插画很适合做食品饮料品牌的页面装饰、生鲜电商的分类图标、空状态与 404 页面的插画，也常被当作前端教学的范例——因为它把渐变绘制、伪立体、挤压拉伸动画这几件事讲得很完整。麻点纹理、切面构造与投影同步的完整写法都在源码里，结构清晰，下载后可查看。
