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>
相关推荐
夜焱辰4 小时前
浏览器端 Agent 的文件版本管理:不用 Git,基于 OPFS + SQLite 自己造了一个
前端·人工智能
梦想的颜色4 小时前
TypeScript 完全指南(下):从类型体操到生产级配置
前端·javascript·typescript
刀法如飞4 小时前
AI时代:DDD领域驱动建模与Ontology语义建模的区别
java·设计模式·架构
jeffer_liu4 小时前
Spring AI 生产级实战:工具调用
java·人工智能·后端·spring·ai编程
比昨天多敲两行4 小时前
linux 线程概念与控制
java·开发语言·jvm
8Qi85 小时前
LeetCode 75:颜色分类(荷兰国旗问题)—— Java 题解 ✅
java·算法·leetcode·指针·排序
zzhongcy5 小时前
@Transactional 同类内部调用失效 + 两种自代理解决方案
java
AutumnWind04205 小时前
【Intelij IDEA使用手册】
java·ide·intellij-idea
Hi~晴天大圣6 小时前
npm使用介绍
前端·npm·node.js
888CC++6 小时前
如何在 C 语言中进行程序调试?
前端·javascript·算法