技术栈

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++要学到什么程度才能找到实习?
下一篇:操作系统与单片机
相关推荐
chilavert318
41 分钟前
技术演进中的开发沉思-371:final 关键字(中)
java·前端·数据库
2301_81699788
43 分钟前
Vite构建工具
前端
海边的Kurisu
1 小时前
Mybatis-Plus | 只做增强不做改变——为简化开发而生
java·开发语言·mybatis
识君啊
1 小时前
Java 二叉树从入门到精通-遍历与递归详解
java·算法·leetcode·二叉树·深度优先·广度优先
daidaidaiyu
1 小时前
一文学习 Spring AOP 源码全过程
java·spring
yuki_uix
2 小时前
深入理解 reduce:从面试题到设计思维
前端
凌云拓界
2 小时前
TypeWell全攻略(二):热力图渲染引擎,让键盘发光
前端·后端·python·计算机外设·交互·pyqt·数据可视化
毕设源码-郭学长
2 小时前
【开题答辩全过程】以 高校人事管理系统 为例,包含答辩的问题和答案
java
热门推荐
01GitHub 镜像站点02AI Agent 平台横评:ZeroClaw vs OpenClaw vs Nanobot03Claude Code + GLM4.7 避坑指南:解决 Unable to connect to Anthropic services04Clawdbot部署教程:解决‘gateway token missing’授权问题的完整步骤05【OpenClaw 本地实战 Ep.3】突破瓶颈:强制修改 openclaw.json 解锁 32k 上下文记忆06配置 OpenClaw 使用 Ollama 本地模型07AI 规范驱动开发“三剑客”深度对比:Spec-Kit、Kiro 与 OpenSpec 实战指南08openClaw安装飞书插件|核心踩坑:spawn EINVAL 错误终极解决指南09HTML 早已不是标签了,它现在是系统级接口:这 9 个 API 直接干翻常用 JS 库10OpenClaw 安装之(三)DeepSeek模型接入配置和详细配置参数