技术栈

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++要学到什么程度才能找到实习?
下一篇:操作系统与单片机
相关推荐
布局呆星
3 分钟前
SpringBoot 基础入门
java·spring boot·spring
风吹迎面入袖凉
32 分钟前
【Redis】Redisson的可重入锁原理
java·redis
w610010466
35 分钟前
cka-2026-ConfigMap
java·linux·cka·configmap
GreenTea
1 小时前
从 Claw-Code 看 AI 驱动的大型项目开发:2 人 + 10 个自治 Agent 如何产出 48K 行 Rust 代码
前端·人工智能·后端
语戚
1 小时前
力扣 968. 监控二叉树 —— 贪心 & 树形 DP 双解法递归 + 非递归全解(Java 实现)
java·算法·leetcode·贪心算法·动态规划·力扣·树
渣渣xiong
1 小时前
从零开始:前端转型AI agent直到就业第五天-第十一天
前端·人工智能
布局呆星
2 小时前
Vue3 | 组件通信学习小结
前端·vue.js
quxuexi
2 小时前
网络通信安全与可靠传输:从加密到认证,从状态码到可靠传输
java·安全·web
热门推荐
01GitHub 镜像站点022026年4月技术前沿:AI大模型爆发、智能体革命与量子安全新纪元03一周AI热点速览(2026.03.31-04.06):GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛04基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南05免费!不限量!用opencode接入英伟达(NVIDIA)大模型,轻松打造你的 AI 编程助手06Oh My Codex 快速使用指南07CodeBuddy与WorkBuddy深度对比:腾讯两款AI工具差异及实操指南08从限购到畅通:GLM-5.1 Coding Plan接入攻略09LLM Wiki:让大模型替你打理知识库的完整指南10AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析