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>
相关推荐
风骏时光牛马9 分钟前
从零到实战,完整AI学习路线
前端
SL_staff35 分钟前
3天上线OKR系统:一名HR与1名工程师如何用JVS完成全栈交付
java·低代码·开源
三十而立洋37 分钟前
深入理解 Monorepo:子包安装依赖
前端·前端工程化
IT_陈寒43 分钟前
Java Stream处理大集合,我的内存怎么就炸了
前端·人工智能·后端
Captaincc1 小时前
AI 用量桌面端-桌面宠物自定义指南
前端·人工智能
OpenTiny社区1 小时前
码力全开,智启前端新生态|OpenTiny 登陆华为全联接大会2026
前端·github
妙码生花1 小时前
利用AI从零学Go并完成实战项目,完工总结:目录结构
前端·后端·go
妙码生花1 小时前
利用AI从零学Go并完成实战项目,完工总结:商业级开源产品定位和核心特性介绍
前端·后端·go
wzdark2 小时前
基于链表的内存池设计与内存复用机制4
java·数据结构·链表
Captaincc2 小时前
掘金AI用量统计v0.1.0大更新-支持桌面宠物自定义和订阅额度卡片
前端·后端