技术栈

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++要学到什么程度才能找到实习?
下一篇:操作系统与单片机
相关推荐
言慢行善
6 分钟前
sqlserver模糊查询问题
java·数据库·sqlserver
专吃海绵宝宝菠萝屋的派大星
12 分钟前
使用Dify对接自己开发的mcp
java·服务器·前端
爱分享的阿Q
12 分钟前
Rust加WebAssembly前端性能革命实践指南
前端·rust·wasm
蓝黑2020
13 分钟前
Vue的 value=“1“ 和 :value=“1“ 有什么区别
前端·javascript·vue
小李子呢0211
22 分钟前
前端八股6---v-model双向绑定
前端·javascript·算法
大数据新鸟
30 分钟前
操作系统之虚拟内存
java·服务器·网络
Tong Z
31 分钟前
常见的限流算法和实现原理
java·开发语言
凭君语未可
35 分钟前
Java 中的实现类是什么
java·开发语言
He少年
37 分钟前
【基础知识、Skill、Rules和MCP案例介绍】
java·前端·python
史迪仔0112
40 分钟前
[QML] QML IMage图像处理
开发语言·前端·javascript·c++·qt
热门推荐
01GitHub 镜像站点02一周AI热点速览(2026.03.31-04.06):GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决?3 种方案实测,附完整排查流程04AI 编程效率翻倍:Superpowers Skills 上手清单 + 完整指南05VMware Workstation Pro 17 虚拟机完整安装教程(2026最新)06【STM32】HAL库 CubeMX 教程 --- 通用定时器 TIM2 定时07Oh My Codex 快速使用指南08实测!Gemma 4 成功跑在安卓手机上:离线 AI 助手终于来了09CodeBuddy与WorkBuddy深度对比:腾讯两款AI工具差异及实操指南10UV安装并设置国内源