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>
相关推荐
Chan1613 小时前
《Java并发编程的艺术》| 并发关键字与 JMM 核心规则
java·开发语言·数据库·spring boot·java-ee·intellij-idea·juc
期待のcode13 小时前
线程睡眠sleep方法
java·开发语言
汤姆yu13 小时前
基于springboot的植物花卉销售管理系统
java·spring boot·后端
不想写bug呀13 小时前
RabbitMQ相关问题(1)
java·rabbitmq
海南java第二人13 小时前
Spring Boot Starters深度解析:简化依赖管理的核心利器
java·spring boot·后端
captain37613 小时前
Java-链表
java·开发语言·链表
tqs_1234513 小时前
跳出多层循环的方式
java·开发语言
东方轧线13 小时前
突破锁竞争的性能枷锁:深度剖析 C++ 内存模型与无锁编程在超大规模并行 AI 系统中的极致应用实践
java·c++·人工智能
想起你的日子13 小时前
EFCore之Code First
前端·.netcore
框架图14 小时前
Html语法
前端·html