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>
相关推荐
J2虾虾9 分钟前
Springboot项目中循环依赖的问题
java·开发语言
weixin_7042660510 分钟前
事务管理全解析:从ACID到Spring实现
java·数据库·spring
文叔叔11 分钟前
大家都在装 OpenClaw,我选择自己实现一个
前端
Barkamin14 分钟前
冒泡排序的简单实现
java·算法·排序算法
熙胤24 分钟前
springboot与springcloud对应版本
java·spring boot·spring cloud
蜡台24 分钟前
vue文件template ,script, style 多文件写法小记
前端·javascript·vue.js
J2虾虾28 分钟前
SpringBoot 中给 @Autowired 搭配 @Lazy
java·spring boot·后端
皙然37 分钟前
深入理解 Java HashSet
java·开发语言
小江的记录本42 分钟前
【HTTP】HTTP请求方法与状态码(全体系知识总结+附表格)
前端·网络·后端·网络协议·http·状态模式·web
leafyyuki1 小时前
前端 SSE 流式请求实战:打造流畅的 AI 流式应答体验
前端·人工智能·markdown