技术栈

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++要学到什么程度才能找到实习?
下一篇:操作系统与单片机
相关推荐
無限進步D
36 分钟前
Java 运行原理
java·开发语言·入门
難釋懷
38 分钟前
安装Canal
java
是苏浙
39 分钟前
JDK17新增特性
java·开发语言
余人于RenYu
1 小时前
Claude + Figma MCP
前端·ui·ai·figma
阿里加多
4 小时前
第 4 章:Go 线程模型——GMP 深度解析
java·开发语言·后端·golang
杨艺韬
4 小时前
vite内核解析-第2章 架构总览
前端·vite
likerhood
4 小时前
java中`==`和`.equals()`区别
java·开发语言·python
小小李程序员
4 小时前
Langchain4j工具调用获取不到ThreadLocal
java·后端·ai
我是伪码农
5 小时前
外卖餐具智能推荐
linux·服务器·前端
2401_88588504
5 小时前
营销推广短信接口集成:结合营销策略实现的API接口动态变量填充方案
前端·python
热门推荐
012026年4月技术前沿:AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点03一周AI热点速览(2026.03.31-04.06):GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛04基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南05GPT-6核心能力解析及与现有主流大模型对比06零成本!Ollama本地部署国产大模型全指南(支持Kimi-K2.5/GLM-5/Qwen,新手秒上手)07免费!不限量!用opencode接入英伟达(NVIDIA)大模型,轻松打造你的 AI 编程助手08CodeBuddy与WorkBuddy深度对比:腾讯两款AI工具差异及实操指南09从限购到畅通:GLM-5.1 Coding Plan接入攻略10LLM Wiki:让大模型替你打理知识库的完整指南