技术栈

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 小时前
5G上行DCI字段判定:端口 流数 PMI选择详解
java·算法·5g
xieliyu.
6 小时前
Java算法精讲:双指针(二)
java·开发语言·算法
jeffer_liu
6 小时前
Spring AI 生产级实战:裁判员
java·人工智能·后端·spring·大模型
云水一下
6 小时前
TypeScript 从零基础到精通(五):高级类型与泛型
前端·javascript·typescript
counterxing
6 小时前
vibe coding 之后,我更不想打字了
前端·agent·ai编程
copyer_xyf
7 小时前
Python 模块与包的导入导出
前端·后端·python
研☆香
7 小时前
es6新特性功能介绍(四)
前端·ecmascript·es6
小bo波
7 小时前
枚举实战
java·设计模式·枚举·后端开发·代码重构
微扬嘴角
7 小时前
React篇1--JSX语法规则、组件、组件实例的3大特性
前端·react.js·前端框架
热门推荐
01GitHub 镜像站点02Codex 下载安装指南:Windows 和 macOS 官方版下载03【AI】2026 年具身智能模型和世界模型总结042026 年 AI 编程工具终极横评:Cursor vs Claude Code vs Copilot vs Windsurf05Codex 桌面端更新后 Chrome 插件和 Computer Use 不可用,怎么排查和修复06CC-Switch 下载、安装与使用配置指南【2026.5.29】07【踩坑记录 | 第一篇】微软商店无法使用时,如何手动安装 OpenAI Codex?附`.msix`文件系统错误解决方法08CC-Switch & Claude 基于 Linux 服务器安装使用指南09Codex 接入 DeepSeek API 完整配置文档10裂开!ChatGPT 居然开始要手机号验证,附详细解决方法