技术栈

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++要学到什么程度才能找到实习?
下一篇:操作系统与单片机
相关推荐
走进IT
2 分钟前
DDD项目分层结构说明
java
橙露
7 分钟前
嵌入式实时操作系统 FreeRTOS:任务调度与信号量的核心应用
java·大数据·服务器
愚公移码
7 分钟前
蓝凌EKP产品:关联机制浅析
java·服务器·前端
阿蒙Amon
14 分钟前
C#每日面试题-is和as的区别
java·开发语言·c#
Tao____
15 分钟前
适合中小企业的物联网平台
java·物联网·mqtt·低代码·开源
迷路剑客
22 分钟前
ES-7.10-高亮HighLight知识点总结
java·数据库·mybatis
阿蒙Amon
27 分钟前
C#每日面试题-简述泛型约束
java·开发语言·c#
汉堡go
39 分钟前
python_chapter6
前端·数据库·python
wusp1994
1 小时前
v-model 和 :value 的深度解析
前端·javascript·vue.js
Wpa.wk
1 小时前
持续集成 - 持续集成工具-Jenkins的部署流程
java·运维·经验分享·ci/cd·自动化·jenkins
热门推荐
01GitHub 镜像站点02OpenCode 入门教程:介绍 · 安装 · 配置第三方 API (如 Claude)03在VSCode配置Java开发环境的保姆级教程(适配各类AI编程IDE)04安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口(持续更新)05AI 规范驱动开发“三剑客”深度对比:Spec-Kit、Kiro 与 OpenSpec 实战指南06UV安装并设置国内源072025 Telegram 最新免费社工库机器人(LetsTG可[特殊字符])搭建指南(含 Python 脚本)08Claude Code Skills 实用使用手册09Linux下V2Ray安装配置指南10BongoCat - 跨平台键盘猫动画工具