css心跳动画

图标引入

复制代码
<img class="icon" src="heart.svg" alt="" srcset="">

CSS代码

css 复制代码
<style>
  .icon {
    animation:
      bpm 1s linear,
      pulse 0.75s 1s linear infinite;
  }

  @keyframes pulse {
    from,
    75%,
    to {
      transform: scale(1);
    }

    25% {
      transform: scale(0.9);
    }

    50% {
      transform: scale(1.2);
    }
  }

  @keyframes bpm {
    from {
      transform: scale(0);
    }

    37.5% {
      transform: scale(1.2);
    }

    75%,
    to {
      transform: scale(1);
    }
  }
</style>
相关推荐
易朵朵几秒前
Z-index
css
张一凡939 分钟前
把“不要乱改”从提示词里拿出来,放进可校验的提案里
前端·后端·架构
木子欢儿14 分钟前
Debian 13 + vsftpd 搭建FTP服务
linux·服务器·前端·网络·debian
leeguoo14 分钟前
让 Claude Code / Codex 用上你已登录的 Chrome
前端·chrome·ai编程
SL_staff16 分钟前
运维救火实战:钉钉API变更致薪资计算中断,如何用可视化逻辑引擎5分钟热修复
java·开源·全栈
猫猫.15338 分钟前
HashTable、HashMap、ConcurrentHashMap 核心区别总结
java·开发语言·java-ee
天蒙蒙亮40 分钟前
打安卓apk包+“应用商城”发布
前端·uni-app
Lank_M1 小时前
视频压到指定大小总超一截?码率控制的误差拆开看
前端
用户2054555788001 小时前
飞书运费台账同步到 MySQL:单一策略落地教程
前端
LEE1 小时前
别把 Agent 架构画成组织架构图——子代理该不该拆,用任务级 Eval 说话
前端·后端·ai编程