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>
相关推荐
Lear几秒前
Vite+Vue3 模块自动导入实战:彻底告别繁琐的 import 语句
前端
七牛开发者6 分钟前
Codex 实践系列 Vol.04:用 Goal 和 Plan 管住一个长任务
java·数据库·人工智能·github·copilot
Csvn9 分钟前
📌 position: sticky 失效的 6 个经典坑:明明写了 sticky,为什么就是不吸顶?
前端
恋猫de小郭11 分钟前
Flutter 的另外一种形态?社区 DartNative 要来了。
android·前端·flutter
我命由我1234512 分钟前
Android Drawable - gradient
android·java·java-ee·kotlin·android studio·android-studio·android runtime
秋天的一阵风19 分钟前
🔥 Network 里那坨 "data:" 我真看吐了,自制开源 Chrome 插件,AI 流式调试直接开挂
前端·人工智能·后端
看到我请叫我铁锤25 分钟前
vue编写web端在线预览文档
前端·javascript·vue.js
Ratten29 分钟前
【Vben 解决】---- 跨页复选获取选择数据
前端
ssshooter34 分钟前
为什么明明只有一个 12px 的小元素,父容器却有 63px 高?
前端·javascript·面试
IT_陈寒41 分钟前
Python的GIL让我深夜加班,这破锁到底怎么折腾的
前端·人工智能·后端