技术栈

css心跳动画

—Qeyser2024-04-04 13:54

图标引入

复制代码
<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>
上一篇:C++要学到什么程度才能找到实习?
下一篇:操作系统与单片机
相关推荐
bonechips
10 分钟前
JS 数组指南:从内存原理到二维矩阵
前端·javascript
亿元程序员
17 分钟前
美术妹子让我给模型加个描边,我差点把Cocos卸了
前端
MacroZheng
34 分钟前
Claude Code官方桌面端正式发布,夯爆了!
java·人工智能·后端
虚无境
42 分钟前
如何编写一个SpringBoot项目告警推送的Starter
java·prometheus·webhook
IT_陈寒
1 小时前
React的useEffect依赖数组把我坑惨了,真相其实很简单
前端·人工智能·后端
徐小夕
1 小时前
JitWord 3.0 正式发布,高精度Word异构解析+复杂组件兼容,打造web端协同Word编辑器
前端·vue.js·算法
恋猫de小郭
1 小时前
KMP / CMP 鸿蒙版本 Beta 发布,他有什么特别之处?
android·前端·flutter
乘风gg
1 小时前
OpenClaw 爆火,但”飞书"赢麻了!!!
前端·ai编程·claude
热门推荐
012026年6月AI行业全景:从百模大战到Agent元年,这30天发生了什么?022026 年 AI 编程工具终极横评:Cursor vs Claude Code vs Copilot vs Windsurf03【AI】2026 年具身智能模型和世界模型总结042026 AI 编程工具终极实战指南:Cursor vs Claude Code vs Copilot,开发者该怎么选?052026年6月AI大模型全景报告:GPT-5.6、Claude Opus 4.8、Gemini 3.5,中美AI三足鼎立谁主沉浮?06GitHub 镜像站点07AI科技热点日报 | 2026年6月1日08上线仅72小时被强制下架:Claude Fable 5 的短命09HTTP 与 HTTPS 的区别:从原理到实战详解10Codex 下载安装指南:Windows 和 macOS 官方版下载