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>
相关推荐
deli007几秒前
0.1 加 0.2 为什么不等于 0.3?IEEE 754 双精度逐位实测
前端
Momo__1 分钟前
前端 Code Review 实战:识别 AI 写代码的 15 个常见坑
前端·vibecoding
SamDeepThinking4 分钟前
CyclicBarrier的底层实现
java·后端·面试
拖孩5 分钟前
全程 AI 写的小程序,刚接上会员虚拟支付,上线第二天就有人真金白银买单了|双签名、定价、iOS 的坑我全踩了一遍
前端·后端·微信小程序
我是人✓6 分钟前
SpringMVC异常处理与拦截器实战揭秘
java·开发语言·后端
小蚂蚁i6 分钟前
React 基础
前端
ZoeLandia8 分钟前
TypeScript 02:interface、type 与类型收窄
前端·typescript
Bode_200210 分钟前
构建制造业知识库
前端·智能制造系统·业务流程再造
cindershade13 分钟前
接口协作的交接面:让并行开发从约定走到发布
前端
JAVA老架构AI智能化14 分钟前
多图叠加比对
前端·javascript·chrome