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>
相关推荐
咖啡八杯37 分钟前
GoF设计模式——中介者模式
java·后端·spring·设计模式
青石路4 小时前
记一次多JDK版本问题的排查,一坑套一坑,差点没爬上来
java
kyriewen5 小时前
我手写了一个 EventEmitter,面试官追问了 6 个问题——第 4 个我没答上来
前端·javascript·面试
IT_陈寒5 小时前
Java的Date类又坑了我一次,改用时间戳真香
前端·人工智能·后端
小林攻城狮6 小时前
使用 Transport 节流解决 Vercel AI SDK 流式渲染卡死问题
前端·react.js
前端缘梦6 小时前
告别 TS 运行时类型漏洞!Zod 完整入门实战教程(前端 / 全栈必备)
前端·react.js·全栈
the_answer6 小时前
Webpack vs Vite 深度对比分析
前端·webpack
转转技术团队6 小时前
验证码识别实战:前端不写页面,改训模型了?
前端
MomentYY7 小时前
Temperature:AI 的“脑洞旋钮”
前端·llm·ai编程
远航_7 小时前
OpenSpec 完整详细介绍
前端·后端