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>
相关推荐
EvenBoy15 小时前
IDEA中使用Claude Code
java·ide·intellij-idea
小小马喽_Thendras15 小时前
ScheduledExecutorService 和Timer的区别
java·开发语言
用户693717500138415 小时前
实测!Gemma 4 成功跑在安卓手机上:离线 AI 助手终于来了
android·前端·人工智能
大阿明15 小时前
使用vite打包并部署vue项目到nginx
前端·vue.js·nginx
小江的记录本16 小时前
【Swagger】Swagger系统性知识体系全方位结构化总结
java·前端·后端·python·mysql·spring·docker
用户4450666087616 小时前
领域模型 DSL 设计
前端
空太Jun16 小时前
Spring Security 自定义数据库认证(初尝试)
java·数据库·spring
画画的阿飞16 小时前
里程碑一:基于 node.js 实现 BFF 层服务端内核过程总结
前端
用户81135818812016 小时前
【AJAX-Day2】Promise与回调地狱
前端·ajax
Moshow郑锴16 小时前
npm国内镜像加速之使用 nrm 工具(灵活切换,适合多环境)
前端·npm·node.js