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>
相关推荐
jgbazsh几秒前
Redis6.2.6下载和安装
java
于先生吖4 分钟前
JAVA 本地生活服务项目实战 家政 5.0 系统前后端分离部署
java·开发语言·生活
大家的林语冰10 分钟前
TypeScript 6 官宣,JS “最后之舞“,版本升级踩雷指南
前端·javascript·typescript
左左右右左右摇晃11 分钟前
Java并发——锁的状态演变
java·开发语言·笔记
英俊潇洒美少年12 分钟前
react useDeferredvalue和useTransition的讲解
前端·react.js·前端框架
Roselind_Yi13 分钟前
排查Visual C++堆损坏(HEAP CORRUPTION)错误:从报错到解决的完整复盘
java·开发语言·c++·spring·bug·学习方法·远程工作
爱学习的程序媛17 分钟前
【WebRTC】呼叫中心前端技术选型:SIP.js vs JsSIP vs Verto
前端·javascript·typescript·音视频·webrtc·实时音视频·web
bing_15819 分钟前
spring Boot 3.0 和2.0的区别
java·spring boot·后端
Thomas.Sir19 分钟前
Shiro认证与授权:Java安全框架的核心机制
java·安全·shiro·权限控制
Amumu1213824 分钟前
Js: ES新特性(一)
开发语言·前端·javascript