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>
相关推荐
明月(Alioo)1 分钟前
Python 并发编程详解 - Java 开发者视角
java·开发语言·python
0xDevNull17 分钟前
基于Java的小程序地理围栏实现原理
java·小程序
arvin_xiaoting22 分钟前
OpenClaw学习总结_II_频道系统_5:Signal集成详解
java·前端·学习·signal·ai agent·openclaw·signal-cli
凌波粒22 分钟前
LeetCode--19.删除链表的倒数第 N 个结点(链表)
java·算法·leetcode·链表
哆啦A梦158829 分钟前
统一返回包装类 Result和异常处理
java·前端·后端·springboot
saadiya~32 分钟前
从插件冗余到极致流畅:我的 Vue 3 开发环境“瘦身”实录
前端·javascript·vue.js
Mem0rin35 分钟前
[Java/数据结构]顺序表之ArrayList
java·开发语言·数据结构
WarrenMondeville1 小时前
4.Unity面向对象-接口隔离原则
java·unity·接口隔离原则
zb200641201 小时前
spring security 超详细使用教程(接入springboot、前后端分离)
java·spring boot·spring
啥咕啦呛1 小时前
java打卡学习3:ArrayList扩容机制
java·python·学习