技术栈

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 分钟前
DAY04_HTML&CSS_从表单到样式的完整学习指南
css·html·产品运营
\xin
1 小时前
pikachu自编exp,xss反射性get,post,存储型xss,dom,dom-x
前端·javascript·xss
雨奔
5 小时前
Kubernetes DNS 完全指南:服务发现核心机制与实践
java·kubernetes·服务发现
是烟花哈
5 小时前
【前端】React框架学习
前端·学习·react.js
逻辑驱动的ken
6 小时前
Java高频面试考点场景题14
java·开发语言·深度学习·面试·职场和发展·求职招聘·春招
阿冰冰呀
6 小时前
互联网大厂Java求职面试实录:谢飞机的“水货”之路
java·mybatis·dubbo·springboot·线程池·多线程·hashmap
水无痕simon
6 小时前
1.单机部署Nacos1.3.2
java
qq435694701
6 小时前
JavaWeb08
前端
2401_87845453
7 小时前
html和css的复习(1)
前端·css·html
@PHARAOH
7 小时前
WHAT - git worktree 概念
前端·git
热门推荐
01GitHub 镜像站点02近期有什么ai的新消息,新动态? 2026.4月032026年4月AI大事件深度解读:大模型竞争进入“深水区“042026年AI前瞻:量子AI、具身智能与科学发现的新纪元05在Windows 11上安装Docker的踩坑记录06codex app每次打开重连5次Reconnecting问题解决07Codex 接入 DeepSeek API 完整配置文档082026年4月技术前沿:AI大模型爆发、智能体革命与量子安全新纪元09DeepSeek V4 全面解析:测评、对比、案例及实操指南102026年AI编程工具终极横评:Cursor vs Claude Code vs Copilot