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>
相关推荐
Re_zero1 分钟前
Java新手避坑:为什么我劝你放弃 scanner.nextInt()?
java
阿珊和她的猫23 分钟前
React Hooks:革新组件开发的优势与实践
前端·react.js·状态模式
全栈技术负责人24 分钟前
AI时代前端工程师的转型之路
前端·人工智能
Good_Starry35 分钟前
Java——反射
java
花归去41 分钟前
echarts 柱状图曲线图
开发语言·前端·javascript
喝拿铁写前端41 分钟前
当 AI 会写代码之后,我们应该怎么“管”它?
前端·人工智能
老前端的功夫1 小时前
TypeScript 类型魔术:模板字面量类型的深层解密与工程实践
前端·javascript·ubuntu·架构·typescript·前端框架
又是忙碌的一天1 小时前
SpringBoot 创建及登录、拦截器
java·spring boot·后端
fox_mt1 小时前
AI Coding - ClaudeCode使用指南
java·ai编程
Nan_Shu_6141 小时前
学习: Threejs (2)
前端·javascript·学习