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>
相关推荐
ss2736 分钟前
线程池工作机制:从任务提交到执行的完整决策流程
java·开发语言
yaoxin52112317 分钟前
276. Java Stream API - 使用 flatMap 和 mapMulti 清理数据并转换类型
java·开发语言·windows
YaeZed20 分钟前
Vue3-插槽slot
前端·vue.js
Vic1010120 分钟前
【无标题】
java·数据库·分布式
杨进军21 分钟前
如何实现划词效果
前端·javascript
前端老爷更车22 分钟前
esp32 小智AI 项目
前端
destinying22 分钟前
五年前端,我凌晨三点的电脑屏幕前终于想通了这件事
前端·javascript·vue.js
想学后端的前端工程师23 分钟前
【React Hooks深度实战指南:从原理到最佳实践】
前端·react.js·前端框架
摇滚侠23 分钟前
Java 零基础全套视频教程,异常,处理异常,自定义异常,笔记 124-129
java·笔记
伯明翰java36 分钟前
【无标题】springboot项目yml中使用中文注释报错的解决方法
java·spring boot·后端