技术栈

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 分钟前
Spring代理类为何依赖注入失效?
java·后端·spring
勿忘,瞬间
11 分钟前
多线程之进阶修炼
java·开发语言
014-code
23 分钟前
线程池参数怎么配才不翻车
java
码事漫谈
23 分钟前
手把手带你部署本地模型,让你Token自由(小白专属)
前端·后端
吴梓穆
24 分钟前
UE5 c++ 常用方法
java·c++·ue5
ZC跨境爬虫
28 分钟前
【爬虫实战对比】Requests vs Scrapy 笔趣阁小说爬虫,从单线程到高效并发的全方位升级
前端·爬虫·scrapy·html
爱上好庆祝
28 分钟前
svg图片
前端·css·学习·html·css3
王夏奇
1 小时前
python中的__all__ 具体用法
java·前端·python
明湖起风了
1 小时前
mqtt消费堆积
java·jvm·windows
Free Tester
1 小时前
如何判断 LeakCanary 报告的严重程度
java·jvm·算法
热门推荐
01GitHub 镜像站点02一周AI热点速览(2026.03.31-04.06):GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南04OpenClaw 请求超时 llm request timed out 怎么解决?3 种方案实测,附完整排查流程05VMware Workstation Pro 17 虚拟机完整安装教程(2026最新)06CodeBuddy与WorkBuddy深度对比:腾讯两款AI工具差异及实操指南07实测!Gemma 4 成功跑在安卓手机上:离线 AI 助手终于来了08Oh My Codex 快速使用指南09UV安装并设置国内源10开发者环境配置:用 Ollama 实现本地大模型部署(附下载慢的解决方案