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>
相关推荐
迷途小羔羊4 分钟前
项目概述
java·javascript·后端
我命由我123456 分钟前
5-1.Python 编码进阶 - 函数进阶(参数、返回值、递归、函数作为参数传递、lambda 匿名函数)
java·服务器·数据库·后端·python·java-ee·python3.11
迷迭绿9 分钟前
Cesium 轨迹回放播放器
前端·javascript·cesium
HolySaga22 分钟前
我用 UTS 写了一个三端同构的蓝牙插件(Android / iOS / 鸿蒙 NEXT),把踩过的坑都讲给你听
前端
小蒜学长31 分钟前
基于Spring Boot+Vue3的在线游戏技术指导师匹配系统的设计与实现(代码+数据库+LW)
java·数据库·spring boot·后端·在线游戏技术指导
文丑颜不良啊32 分钟前
LeetCode226~250题目解析
java·leetcode
程序员老赵42 分钟前
Docker 部署 XWiki:轻松搭建企业知识库与协作 Wiki
前端·docker·开源
console.log('npc')1 小时前
第 10 章 更多业务模块扩展
前端·人工智能·大模型
Dovis(誓平步青云)1 小时前
逆变器报警却找不到板子,热斑图怎样定位到具体组串
java·开发语言·人工智能·机器学习·卷积神经网络
行者全栈架构师1 小时前
我用 TRAE Work 把桌游之夜搬进了浏览器:一个计分器的从创意到上线
前端·算法·架构