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 小时前
Postman 被曝自动往 Claude Code 和 Codex 装插件
前端·后端·程序员
AI你一生一世7 小时前
不止于时序存储:DolphinDB 如何成为 AI 时代的工业智能底座
java·人工智能·struts·时序数据库·工业智能·dolphindb·ai基础设施
云-缩影7 小时前
拆解 AI 图像生成应用的后端架构:ECS、OSS 和大模型 API 怎么配合
java·spring boot·后端
瑞克-桑切斯7 小时前
7、MySQL 慢查询排查与优化实战指南
java·服务器·数据库
Csvn8 小时前
性能监控
前端
Csvn9 小时前
构建工具
前端
FRing039 小时前
vue2干货总结3(computed计算属性、watch监听器)
开发语言·前端·vue.js·vue2
kyriewen12 小时前
Skills 榜前 10 我全装了:只有 3 个能直接用
前端·javascript·程序员
海的透彻12 小时前
dockerfile如何快速构建容器(java服务)
java·开发语言
IT_陈寒12 小时前
当Java的hashCode遇上Lombok,我的缓存被全清了
前端·人工智能·后端