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>
相关推荐
哟哟耶耶11 分钟前
component-svg圆环进度百分比图(顶部文本,中间图形,底部文本)
前端·css·echarts
不想秃头的程序员15 分钟前
Vue3 中的 <keep-alive> 详解
前端·vue.js
想学后端的前端工程师15 分钟前
【Java JVM虚拟机深度解析:从原理到调优】
java·jvm·python
其尔Leo15 分钟前
Vue3可动态添加行el-table组件
前端
Ricardo_032415 分钟前
关于死锁问题的学习总结
android·java
紫小米15 分钟前
webpack详解和实操
前端·webpack·node.js
az31316 分钟前
Spring Bean初始化机制详解
java·spring·bean·初始化
不想秃头的程序员19 分钟前
JavaScript 中的深拷贝与浅拷贝详解
前端·面试
风止何安啊21 分钟前
用 10 行代码就能当 “服务器老板”+“网络小偷”+“文件管家”?Node.js:别不信!
前端·javascript·node.js
昨晚我输给了一辆AE8621 分钟前
react-hook-form 初始化值为异步获取的数据的最佳实践
前端·react.js·强化学习