技术栈

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++要学到什么程度才能找到实习?
下一篇:操作系统与单片机
相关推荐
爱勇宝
5 小时前
第 1 章:别把“需求文档”当成真正的需求
前端·后端·程序员
认真的酒窝
5 小时前
自己动手开发编译器(十一)语义分析
java·开发语言
梨子同志
5 小时前
常用命令
前端
梨子同志
6 小时前
React 状态管理
前端
Dxy1239310216
6 小时前
MySQL索引完整教程:创建、查看、修改、删除与日常管理
前端·javascript·mysql
剪刀石头布啊
6 小时前
js能被遍历的集合有哪些特征,为何能被遍历
前端
剪刀石头布啊
6 小时前
js解构
前端
剪刀石头布啊
6 小时前
防抖功能的逐步递进
前端
wbs_scy
7 小时前
Linux C++ 高并发编程:线程池全链路深度解析,从原理到手撕实现
java·开发语言
剪刀石头布啊
7 小时前
对象的大小比较与面向对象思考
前端
热门推荐
01GitHub 镜像站点022026 年 AI 编程工具终极横评:Cursor vs Claude Code vs Copilot vs Windsurf03AI科技热点日报 | 2026年07月01日04【AI】2026 年具身智能模型和世界模型总结052026 AI 编程工具终极实战指南:Cursor vs Claude Code vs Copilot,开发者该怎么选?062026 年 AI 大模型 & AI 编程工具实战全总结072026 AI 编程工具选型横评:Cursor / Claude Code / Trae / Copilot 到底选谁(建议收藏·避坑版)08Agnes AI 免费 API 接入指南:文本、生图、生视频,一套接口全免费092026 国产 AI 大模型横评:DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打?102026年6月AI大模型全景报告:GPT-5.6、Claude Opus 4.8、Gemini 3.5,中美AI三足鼎立谁主沉浮?