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>
相关推荐
怦然丶心动6 分钟前
用 Java 把干支历法算清楚:从节气切年到可读摘要
java·算法·vue·独立开发·spring boot / spring
青春逝如流水11 分钟前
Java 线程与操作系统、硬件的关系:状态、映射与差异
java·开发语言·多线程·ai文章
Amos_Web11 分钟前
Rspack 源码解析(二十):Typed Hook 系统如何靠宏生成
前端·rust·前端框架
深入云栈13 分钟前
Netty 4.2.x 源码深度解析 (十八):ChannelOutboundBuffer 写缓冲区 —— 发送队列与流量控制
java·后端·架构
我是人✓16 分钟前
Java核心术语与内存机制深度解析
java
xuxigifxfh19 分钟前
面试记录2026
java·mysql·面试·职场和发展
liangbo719 分钟前
04-List 到底该用哪个?ArrayList、LinkedList、Vector、CopyOnWriteArrayList 选型实战
java
程序员大阳24 分钟前
副队长CSS教程(29)–CSS Grid 实战:实现通用图文混排布局
前端·css·grid·图文混排
Wang's Blog25 分钟前
Java 中间件之 RabbitMQ 快速入门: SpringAMQP WorkQueue 工作队列模型
java·中间件·java-rabbitmq
代码山河27 分钟前
第一个Java程序:Hello World从零编写与运行
java·学习·架构·教程·面向对象·项目