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>
相关推荐
默_笙5 分钟前
💌 为了把"主题色"传给孙子组件,我翻了五层楼——直到遇见了 useContext
前端·javascript
颜进强7 分钟前
04 - 一张图看懂 OpenSpec 变更的一生:从创建到归档
前端·后端·ai编程
the_answer11 分钟前
JS 垃圾回收机制
前端
小KK_12 分钟前
JS 事件循环从小白视角入门:宏任务、微任务与 async/await 一网打尽
前端·javascript
aloha_21 分钟前
Linux服务器上指定目录的文件下载
前端
萧瑟余晖42 分钟前
Java深入解析篇三十六之分布式系统详解
java·开发语言·分布式
KaKa_大王1 小时前
关于秒杀项目的一些理解
java·学习
tomla1 小时前
使用Java VisualVM观察过期对象引用现象
java
M1A11 小时前
Spring Boot YAML 配置读取完全指南:从基础到微服务
java
szp20051 小时前
为了在浏览器里跑多线程 ONNX 推理,我把自己的支付浮层弄挂了
前端·webassembly