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>
相关推荐
光影少年7 小时前
React18 函数组件执行顺序、严格模式下重复执行问题
前端·javascript·react.js
之歆7 小时前
DAY_20JavaScript 条件语句与循环结构深度学习(一)
前端·javascript
小新同学^O^7 小时前
简单学习 --> Spring统一处理
java·学习·spring·统一功能处理
程序猿乐锅7 小时前
【Tilas|第七篇】学员管理实现
java·笔记·idea·tlias
lihaozecq7 小时前
从零实现一个 ReAct Agent Loop - 可中断、可流式、多模型支持
前端·agent·ai编程
冴羽yayujs7 小时前
GitHub 前端热榜项目 - 日榜(2026-05-10)
前端·github
CAE虚拟与现实7 小时前
前后端调试常用工具大全
前端·后端·vue·react·angular
iuu_star7 小时前
跑通最简单的Vue3+Python前后端分离项目
前端·vue.js·python
程序猿乐锅7 小时前
【Tilas|第六篇】班级管理实现
java·笔记·tlias
吴声子夜歌7 小时前
Java——继承实现的基本原理
java·继承