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>
相关推荐
文心快码BaiduComate2 分钟前
Comate Spec Mode能力升级:让复杂任务开发更可控、更稳定
前端·后端
前端付豪6 分钟前
实现 AI 回复支持 Markdown 渲染
前端·人工智能·markdown
MX_93596 分钟前
Spring整合Web环境实现思路
java·开发语言·后端·spring
Darkdreams10 分钟前
总结 Spring 注入 bean 的四种方式
java·后端·spring
Byron__14 分钟前
ArrayList 与 LinkedList 源码深度对比解析
java·开发语言
程序员buddha16 分钟前
Java面试八股文数据库篇
java·数据库·面试
阳火锅17 分钟前
鳌虾 AoCode:重新定义 AI 编程助手的下一代可视化工具
前端·人工智能·架构
拾贰_C20 分钟前
【node】node彻底卸载删除
前端
小手cool21 分钟前
2025IDEA每次重启都得重载maven项目
java·maven·intellij-idea
SuperEugene21 分钟前
Vue3 组合式函数(Hooks)封装规范实战:命名 / 输入输出 / 复用边界 + 避坑|Vue 组件与模板规范篇
开发语言·前端·javascript·vue.js·前端框架