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>
相关推荐
Wang's Blog13 小时前
Java 项目实战: 交友项目 - FastDFS:入门案例
java·开发语言·交友
LucianaiB13 小时前
【元宝搜索开发者征文大赛】AI时代,学得慢就不用学?用元宝搜索打造一个教程保质期,确保每一个教程符合你的现状
前端·人工智能·ai编程
apcipot_rain14 小时前
C++转Java日记(03)
java·开发语言·c++
excel14 小时前
JavaScript 对象池:减少高频对象创建与 GC 压力
前端
皮皮林55114 小时前
Java实现微信扫码登录
java
陈随易15 小时前
纯 Go 写的 JS 引擎,跑分超过了 C 语言的 QuickJS
前端·后端·程序员
Yyyyyy~16 小时前
【Java】Day4Web基础知识
java·spring boot
子兮曰17 小时前
Chrome 权限元素实战:144 与 151 的渐进增强写法
前端·javascript·chrome
IT_陈寒17 小时前
Redis连接池泄漏那次,我差点把生产环境搞崩了
前端·人工智能·后端
强尼银手17 小时前
我花一天做了个格斗游戏原型,判定全对,然后被「美术」劝退了
前端·javascript