技术栈

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++要学到什么程度才能找到实习?
下一篇:操作系统与单片机
相关推荐
ji_shuke
6 分钟前
Vue3 前端批量打印 PDF/图片踩坑记:跨域、合并打印、对话框闪退与按钮一直 loading
前端·pdf·状态模式·pdf打印
李伟_Li慢慢
6 分钟前
06-mini版WebGLState
前端·three.js
李伟_Li慢慢
11 分钟前
04-three.js的渲染流程概览
前端·three.js
李伟_Li慢慢
11 分钟前
07-WebGLProperties
前端·three.js
爱勇宝
12 分钟前
AI 都能写代码了,还要学计算机吗?
前端·后端·程序员
cfm_2914
13 分钟前
Spring监听器
java·spring boot·后端
石像鬼₧魂石
15 分钟前
【Y2Ksoft】四季贵州水世界乐园管理系统 —— 玻璃拟态 · 单文件HTML · 开箱即用
前端·html
涛涛ing
18 分钟前
尤雨溪宣布:Vue 3.6 发布、Vue 4.0 启动、Vite 8 已落地
前端
李伟_Li慢慢
21 分钟前
05-mini版材质
前端·three.js
SamDeepThinking
21 分钟前
Java面向对象在JVM里怎么实现
java·后端·面试
热门推荐
012026年7月AI圈大地震:GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片02GitHub 镜像站点03AI科技热点日报 | 2026年07月01日04幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南052026 国产 AI 大模型横评:DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打?06GPT-5.5 对比 GPT-5.6 Sol、Terra、Luna:官方性能数据与选型分析07AI 编程 IDE 全景解析 2026:Agent 全面接管开发链路082026 年 AI 大模型 & AI 编程工具实战全总结09几个好用的ip纯净度检测网站10国内可直接用、免费额度/永久免费的大模型API清单(含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等)