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>
相关推荐
Dcs23 分钟前
Java 中 UnaryOperator 接口与 Lambda 表达式的应用示例
java·后端
bagadesu2 小时前
使用Docker构建Node.js应用的详细指南
java·后端
没有bug.的程序员2 小时前
Spring Cloud Gateway 性能优化与限流设计
java·spring boot·spring·nacos·性能优化·gateway·springcloud
洛_尘3 小时前
JAVA EE初阶 2: 多线程-初阶
java·开发语言
Slow菜鸟4 小时前
Java 开发环境安装指南(五) | Git 安装
java·git
一只小阿乐5 小时前
react 封装弹框组件 传递数据
前端·javascript·react.js
lkbhua莱克瓦245 小时前
Java基础——方法
java·开发语言·笔记·github·学习方法
533_5 小时前
[element-plus] el-tree 动态增加节点,删除节点
前端·javascript·vue.js
禁止摆烂_才浅5 小时前
前端开发小技巧-【JavaScript】- 获取元素距离 document 顶部的距离
前端·javascript·react.js
wshzd5 小时前
LLM之Agent(二十九)|LangChain 1.0核心组件介绍
前端·javascript·langchain