技术栈

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++要学到什么程度才能找到实习?
下一篇:操作系统与单片机
相关推荐
mCell
2 小时前
用 Knip 清理 AI Coding 留下的冗余代码
前端·ai编程·前端工程化
鹿角片ljp
2 小时前
KV Cache 解析
java·算法
captain376
2 小时前
网络原理(9)-数据链路层
java·网络协议·java-ee
笃行350
2 小时前
使用Rokid AIUI做了一个童年推箱子游戏
前端
惊讶的猫
3 小时前
意图识别置信度和检索重排的分数
java
caoerzhong
3 小时前
仓库管理数字化趋势解读:JeeWMS 开源 Java WMS 视角下的五个演进方向
java·开源
程序员JerrySUN
3 小时前
Jetson Edge AI 实战01:Nano、Xavier、Orin 怎么选?Jetson 硬件选型详解【视频讲解】
java·数据库·redis·安全·mybatis
excel
3 小时前
前端加密的作用与使用场景
前端
Joy T
4 小时前
Spring AI 2.0 Agent 进阶:Memory、State 与 Context Engineering 常见技术全景
java·人工智能·后端·spring·agent入门·agent state
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单(含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等)02蜘蛛磁力 搜索引擎大全,如何使用蜘蛛磁力查找磁力链接03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05微信历史版本含下载地址( Windows PC | 安卓 | MAC )及设置微信不更新06人工智能(AI)发展史:详细里程碑072026 国产 AI 大模型横评:DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打?08ZCode 周末送额度活动开启:3 亿 Token 免费领取09数学公理体系大全:第六章 选择公理的等价形式及证明10【一等奖版】2026 国赛 A题 药材的烘干问题