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>
相关推荐
前端_yu小白8 分钟前
react常用优化手段
前端·javascript·react.js·性能优化·usecallback·usememo
攀登的牵牛花11 分钟前
前端向架构突围系列 - 框架设计(六):解析接口职责的单一与隔离
前端·架构
涵涵(互关)12 分钟前
JavaScript 对大整数(超过 2^53 - 1)的精度丢失问题
java·javascript·vue.js
进击的丸子13 分钟前
基于虹软Linux Pro SDK的多路RTSP流并发接入、解码与帧级处理实践
java·后端·github
小北方城市网13 分钟前
微服务架构设计实战指南:从拆分到落地,构建高可用分布式系统
java·运维·数据库·分布式·python·微服务
开开心心_Every15 分钟前
离线黑白照片上色工具:操作简单效果逼真
java·服务器·前端·学习·edge·c#·powerpoint
予枫的编程笔记16 分钟前
【Java进阶】深入浅出 Java 锁机制:从“单身公寓”到“交通管制”的并发艺术
java·人工智能·
while(1){yan}19 分钟前
SpringAOP
java·开发语言·spring boot·spring·aop
专注于大数据技术栈19 分钟前
java学习--Collection
java·开发语言·学习
heartbeat..20 分钟前
Spring 全局上下文实现指南:单机→异步→分布式
java·分布式·spring·context