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>
相关推荐
吴声子夜歌几秒前
Guava——反射
java·开发语言·guava
梦曦i2 分钟前
create-uni-app v1.2.0:交互体验优化
前端·uni-app
Moment4 分钟前
太好了!NestJS 12 大版本转向 ESM,新项目默认构建换 Rspack
前端·javascript·后端
Csvn8 分钟前
泛型与条件类型:TypeScript 类型体操的核心
前端
涛涛ing9 分钟前
一周之内,前端 AI 编程的格局被彻底改写了三次
前端·程序员
fxss12 分钟前
免费儿童学习网站
前端
X1A0RAN31 分钟前
Jenkins 流水线跨阶段的数据共享:让变量“动态更新“成为可能
java·servlet·jenkins
Rain的Java大神之路37 分钟前
高并发下的热点账户余额扣减:Redis+Lua脚本实现无锁记账
java·spring boot·redis·后端·spring cloud·缓存·lua
Eiceblue38 分钟前
如何构建一个纯前端 Word 转 Markdown 转换器(React + WebAssembly)
前端·react.js·word
随遇而安zx39 分钟前
【地基篇】---JVM 类加载 源码解析(基于 Java 8)
java·jvm·python