纯css小狗的核心是transform与border-radius组合：狗头用宽高差+非对称圆角，耳朵单设圆角+倾斜旋转，尾巴用定向圆角+旋转，眼睛加高光伪元素，鼻子用双div模拟鼻孔，动画需多帧控制节奏、合理缓动及延迟触发，移动端适配须用rem动态根字体、will-change优化及伪元素绘阴影。
transform 和 border-radius 是画 CSS 小狗最核心的两个能力，其他都是围绕它们组织结构和动画。别指望用 clip-path 或 SVG 混入——纯 CSS 实现小狗，本质就是「堆叠带圆角的块级元素 + 精细控制变形」。
怎么用 div 拼出狗头、耳朵、尾巴这些形状
狗头不是圆形，是「上宽下窄的椭圆感」：用 width/height 差值 + border-radius: 50% / 60% 拉出自然弧度；耳朵不能是直角矩形，得靠 border-top-left-radius 和 border-top-right-radius 单独设高百分比（比如 80% / 20%），再配合 transform: rotate() 倾斜；尾巴要弯曲？别写多层嵌套 div，直接用一个 div + border-radius: 100% 0 0 100% + transform: rotate(30deg) 就能模拟弧线末端。
- 耳朵左右不对称才像活物：左耳用
rotate(-45deg)，右耳用rotate(35deg)，别镜像复制 - 眼睛别用纯黑圆点：加
::before白点模拟高光，大小设为眼珠的 25%，位置用top: 30%; left: 30% - 鼻子用两个紧挨的
div模拟鼻孔，不要单个椭圆——太卡通，缺呼吸感
@keyframes 动画必须控制节奏，不是越快越好
CSS 小狗动起来的关键，不在“有没有动画”，而在“哪几帧该停顿”。比如摇尾巴，0% → 50% → 100% 三帧不够：实际要用五帧，其中 30% 和 70% 设为关键转折点，并在 50% 加 animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1) 模拟肌肉回弹。眨眼动画尤其敏感——持续时间必须 ≤ 0.15s，否则像故障。
- 呼吸起伏用
transform: scale(1, 1.03)循环，周期设为4s，比心跳慢一点才自然 - 耳朵竖起动作要延迟触发：先有
head的transform: translateY(-5px)，0.1s 后耳朵才开始rotate - 所有动画的
animation-fill-mode必须设为forwards，否则鼠标移开就塌掉
移动端适配最容易翻车的三个地方
用 vmax 单位写尺寸看似聪明，但 Safari 对 vmax 在 transform 中的支持不稳定；iOS 上 z-index 层级经常失效；还有阴影在低分辨率屏上糊成一片。这些问题不会报错，只会让小狗“看起来怪怪的”。
- 尺寸统一改用
rem+ 根字体动态计算：document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px' - 耳朵、尾巴等浮动部件必须加
will-change: transform，否则 iOS 滚动时会闪退 - 阴影不用
box-shadow，改用伪元素::after绘制椭圆灰块 +opacity: 0.15，兼容性好且不糊
真正难的不是画出一只狗，而是让它的耳朵抖动频率和呼吸起伏保持物理一致性——这两个动画得共用同一个 animation-delay 偏移量，否则就像身体和神经系统没接通。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
