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>
相关推荐
bearpping1 分钟前
MySQL JSON数据类型全解析(JSON datatype and functions)
java
政采云技术2 分钟前
深入理解 setState 执行机制
前端·react.js
lclcooky2 分钟前
JavaWeb项目打包、部署至Tomcat并启动的全程指南(图文详解)
java·tomcat
清汤饺子3 分钟前
Everything Claude Code:让我把 AI 编程效率再翻一倍的东西
前端·javascript·后端
想进大厂的小徐7 分钟前
Spring 容器启动与 Bean 创建流程
java·spring boot·spring
dreamxian10 分钟前
微服务1 -- MybatisPlus
java·微服务·架构
西洼工作室11 分钟前
React TabBar切换与高亮实现
前端·javascript·react.js
糖炒栗子032612 分钟前
后端异步任务编排:基于 RabbitMQ 的“中控-工人”模式
java·rabbitmq
belldeep14 分钟前
前端:Bootstrap 3.0 , 4.0 , 5.0 有什么差别?
前端·bootstrap·html
wuhen_n20 分钟前
Tool Schema 设计模式详解
前端·javascript·ai编程