技术栈

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++要学到什么程度才能找到实习?
下一篇:操作系统与单片机
相关推荐
wr200514
7 分钟前
第二次作业,渗透
java·后端·spring
lichenyang453
14 分钟前
从零开始构建 React 文档系统 - 完整实现指南
前端·javascript·react.js
比特森林探险记
15 分钟前
Hooks、状态管理
前端·javascript·react.js
landonVM
20 分钟前
Linux 上搭建 Web 服务器
linux·服务器·前端
css趣多多
23 分钟前
路由全局守卫
前端
阿蒙Amon
35 分钟前
C#每日面试题-Thread.Sleep和Task.Delay的区别
java·数据库·c#
Haooog
37 分钟前
AI应用代码生成平台
java·学习·大模型·langchain4j
AI视觉网奇
1 小时前
huggingface-cli 安装笔记2026
前端·笔记
爬山算法
1 小时前
Hibernate(67)如何在云环境中使用Hibernate?
java·后端·hibernate
比特森林探险记
1 小时前
组件通信 与 ⏳ 生命周期
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02OpenCode 入门教程:介绍 · 安装 · 配置第三方 API (如 Claude)03Clawdbot 中文汉化版 接入微信、飞书04【网络安全测试】Burp Suite工具使用说明、配置及常见问题(有关必回)05Claude Code Skills 实用使用手册06在Trae中使用Pencil MCP07struts2 XML外部实体注入漏洞复现(CVE-2025-68493)08UV安装并设置国内源09零门槛部署本地 AI 助手:Clawdbot/Meltbot 部署深度保姆级教程10AI 规范驱动开发“三剑客”深度对比:Spec-Kit、Kiro 与 OpenSpec 实战指南