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>
相关推荐
猿究院-赵晨鹤10 分钟前
String、StringBuffer 和 StringBuilder 的区别
java·开发语言
BillKu16 分钟前
Vue3应用执行流程详解
前端·javascript·vue.js
葵野寺20 分钟前
【RelayMQ】基于 Java 实现轻量级消息队列(九)
java·开发语言·rabbitmq·java-rabbitmq
Codebee31 分钟前
OneCode 移动套件多平台适配详细报告
前端·人工智能
你知唔知咩系timing啊34 分钟前
🎙️ 站在巨人肩膀上:基于 SenseVoice.cpp 的前端语音识别实践
前端
一位搞嵌入式的 genius35 分钟前
前端开发核心技术与工具全解析:从构建工具到实时通信
前端·笔记
littleplayer37 分钟前
Redux 中›ABC三个页面是如何通信的?
前端
安卓开发者37 分钟前
鸿蒙NEXT的Web组件网络安全与隐私保护实践
前端·web安全·harmonyos
代码不停38 分钟前
MySQL联合查询
java·数据库·mysql
nightunderblackcat40 分钟前
新手向:C语言、Java、Python 的选择与未来指南
java·c语言·python