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>
相关推荐
IT枫斗者枫哥13 分钟前
子线程断言失败,JUnit 为什么还显示通过?
java·后端
鶴哥只手遮天15 分钟前
《Electron 45.2.3 内核解剖》第 4 章 补丁体系:380 个补丁改了什么
前端·electron
考虑考虑3 小时前
JDK27中的Set.ofLazy
java·后端·java ee
FungLeo3 小时前
成为全栈·Vue 管理后台篇·分类树与标签管理:层级数据如何落到管理界面
前端·javascript·vue.js·分类树·naive ui·标签管理·前端数据结构
文丑颜不良啊3 小时前
LeetCode2841~2860题目解析
java·leetcode
小南家的青蛙3 小时前
Tomcat与Jetty深度对比
java·tomcat·jetty
乌暮4 小时前
Spring AOP 与 Spring 事务:用大白话彻底理解原理与实践
java·数据库·spring boot·后端·sql·学习·spring
YDS8294 小时前
Small Spring IOC篇:容器事件及其监听器
java·spring
金銀銅鐵4 小时前
带您看懂字节码指令(三):一行加法里有什么
java·jvm
文丑颜不良啊5 小时前
LeetCode2921~2940题目解析
java·leetcode