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>
相关推荐
可观测性用观测云6 分钟前
网站/接口可用性拨测最佳实践
前端
乌暮13 分钟前
JavaEE初阶--多线程案例
java·java-ee
小光学长22 分钟前
基于ssm旅游管理系统的开发与设计z050cft7(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
java·数据库·旅游
2503_9284115625 分钟前
12.26 小程序问题和解决
前端·javascript·微信小程序·小程序
灼华_27 分钟前
超详细 Vue CLI 移动端预览插件实战:支持本地/TPGZ/NPM/Git 多场景使用(小白零基础入门)
前端
借个火er27 分钟前
npm/yarn/pnpm 原理与选型指南
前端
总之就是非常可爱27 分钟前
vue3 KeepAlive 核心原理和渲染更新流程
前端·vue.js·面试
Mr_chiu28 分钟前
当AI成为你的前端搭子:零门槛用Cursor开启高效开发新时代
前端·cursor
over69729 分钟前
防抖与节流:前端性能优化的“双子星”,让你的网页丝滑如德芙!
前端·javascript·面试
用户35218024547529 分钟前
🥯2025 年终极避坑指南:Spring Boot 2.7 + 3.2 混合集群的 Redis + OAuth2 序列化血泪史
java·后端·spring cloud