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>
相关推荐
SL_staff几秒前
离散制造排程破局:JVS-APS 四步闭环落地实践(开发者视角)
java·产品·全栈
SameX几秒前
HarmonyOS ArkUI Dialog 复用 用 @CustomDialog + enum type 做多类型统一管理的做法
前端
这个昵称不容易10 分钟前
SpringBoot 美容院管理系统:232个Java文件315个接口,5套角色从预约到发货一整条链路
java·springboot·毕设
AiMan17 分钟前
豆包爱学还是不可以导出左侧所有对话,只能单容导出,方法不对吗
前端
AiMan39 分钟前
Grok生成的内容能否下载吗?
前端
装不满的克莱因瓶1 小时前
【SpringAI Alibaba】ReactAgent记忆管理MessageTrimmingHook与MessageDeletionHook
java·人工智能·ai·ai编程·springai·springaialibaba
徐小夕1 小时前
JitArchives,一款基于JitWord协同AI文档打造的企业级电子档案系统
前端·vue.js·github
文丑颜不良啊1 小时前
LeetCode2241~2260题目解析
java·leetcode
陈随易1 小时前
Node.js 2026上半年都有哪些性能提升?
前端·后端·程序员
文丑颜不良啊1 小时前
LeetCode2321~2340题目解析
java·leetcode