技术栈

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++要学到什么程度才能找到实习?
下一篇:操作系统与单片机
相关推荐
暮色妖娆丶
26 分钟前
不过是吃了几年互联网红利罢了,我高估了自己
java·后端·面试
汪汪队长
1 小时前
谷歌浏览器自定义油猴插件
前端
ZFSS
1 小时前
SeeDance Tasks API 的对接和使用
前端·人工智能
睿智的仓鼠
1 小时前
🦞OpenClaw 快速部署及使用指南
前端·人工智能
前端付豪
1 小时前
Nest 项目小实践之图书增删改查
前端·node.js·nestjs
比特鹰
1 小时前
手把手带你用Flutter手搓人生K线
前端·javascript·flutter
奔跑路上的Me
1 小时前
前端导出 Word/Excel/PDF 文件
前端·javascript
bluceli
1 小时前
JavaScript异步编程深度解析:从回调到Async Await的演进之路
前端·javascript
会员源码网
1 小时前
告别参数混乱:如何优雅解决方法参数过多导致的可维护性难题
css
NE_STOP
1 小时前
MyBatis-参数处理与查询结果映射
java
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03OpenClaw + 飞书(Feishu)环境搭建指南04OpenClaw优化飞书API 额度已耗尽问题05本地部署 OpenClaw + DeepSeek-R1 完全指南06Claude Code + GLM4.7 避坑指南:解决 Unable to connect to Anthropic services07Window 10部署openclaw报错node.exe : npm error code 12808小黑课堂计算机二级WPSoffice题库软件下载安装教程(2026年3月最新版)09OpenClaw大龙虾机器人完整安装教程10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX :mcp-documents-reader 工具使用指南