css图片想做轻微脉冲效果怎么实现_通过scale循环动画生成微动视觉-css教程-PHP中文网

css图片想做轻微脉冲效果怎么实现_通过scale循环动画生成微动视觉

P粉602998670

发布： 2025-12-15 09:14:02

原创

773人浏览过

轻微脉冲效果应使用 scale(0.98–1.02)、2–4秒时长、ease-in-out缓动；定义@keyframes pulse-scale使缩放以中心为原点，峰值仅±1.5%，配合animation: pulse-scale 3s ease-in-out infinite和transform-origin: center实现自然呼吸感。

css图片想做轻微脉冲效果怎么实现_通过scale循环动画生成微动视觉

用 CSS 的 @keyframes 配合 transform: scale() 做轻微脉冲效果，关键在于幅度小、节奏缓、不突兀——通常 scale 在 0.98～1.02 之间浮动，动画时长控制在 2～4 秒，用 ease-in-out 或 ease 让变化更自然。

基础脉冲动画定义

定义一个柔和缩放循环：

@keyframes pulse-scale {
  0% { transform: scale(1); }
  50% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

登录后复制

这里峰值只放大 1.5%，人眼感知为“微微呼吸感”，不会干扰图片主体信息。

应用到图片并控制循环行为

给 img 或容器添加动画，并设置合理参数：

立即学习“前端免费学习笔记（深入）”；

Waifulabs

一键生成动漫二次元头像和插图

317

查看详情

使用 animation: pulse-scale 3s ease-in-out infinite; —— 3 秒一周期，不过快也不拖沓
加 transform-origin: center; 确保缩放以图片中心为基准，避免偏移抖动
建议搭配 will-change: transform; 提升动画流畅度（尤其在移动端）

进阶：让脉冲更自然（可选）

纯线性缩放略显机械，可微调关键帧让节奏更有机：

@keyframes pulse-organic {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.018); }
  70% { transform: scale(0.995); } /* 轻微回弹，模拟弹性 */
}

登录后复制

这种“先微胀、再略收”的节奏比单纯膨胀更接近真实呼吸感，且仍保持视觉稳定。