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>
相关推荐
颜进强8 小时前
LangChain 从入门到实践:用最小案例理解 RAG 的 5 个核心抽象
前端·后端·ai编程
颜进强8 小时前
MCP 从入门到实践:用 TypeScript 实现第一个 MCP Server
前端·后端·ai编程
朕的剑还未配妥8 小时前
CSS 实现渐变毛玻璃:从 backdrop-filter 到多层 mask
前端·css
Ivanqhz9 小时前
Rust Lazy浅析
java·javascript·rust
程序员黑豆9 小时前
鸿蒙开发实战:使用 List 组件构建新闻列表
前端·华为·harmonyos
xiaobaoyu9 小时前
谈谈你对iframe的了解
前端
bksczm9 小时前
Linux之日志和线程池、内存池
java·开发语言
GISer_Jing9 小时前
前端转全栈须知后端知识
前端·后端·ai·前端框架
笨蛋不要掉眼泪9 小时前
Java虚拟机:对象复活、引用强度与Stop-The-World
java·开发语言·jvm
爱勇宝9 小时前
我做了一个排版器,也踩了一遍富文本复制的坑
前端·后端·微信