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>
相关推荐
特立独行的猫A37 分钟前
13MB 单文件、一条命令变服务:把仓颉写的 cjh 内嵌进你的应用,当它的 AI 大脑
java·后端·python
Brookty44 分钟前
Java博客项目实战|工程环境与构建:工程目录、PowerShell命令调用与JDK/IDEA/Maven工作机制
java·项目实战
养军博客1 小时前
Spring Boot 3.x + Spring Security 6.x 整合 JWT 实战:jjwt 与 java-jwt 两种工具库详解
java·spring boot·springsecurity
IT_陈寒1 小时前
SpringBoot实战技巧总结
前端·人工智能·后端
TeamDev1 小时前
使用 JxBrowser 在桌面应用中集成 Spring
java·前端·后端·spring·混合应用·jxbrowser·浏览器控件
J.YA1 小时前
String字符串[面试题]
java·开发语言
陈随易3 小时前
Rolldown 把插件改动回传提速 26 倍
前端·后端·程序员
笃行35010 小时前
集中式与分布式,KingbaseES 的四种形态共用一套内核
前端
金銀銅鐵11 小时前
为什么枚举类中可以定义抽象方法
java·后端·ai编程
陈随易11 小时前
Vue 编译器换掉 source map,快了三四成
前端·后端·程序员