技术栈

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++要学到什么程度才能找到实习?
下一篇:操作系统与单片机
相关推荐
weixin_46140858
7 分钟前
npm npx yarn
开发语言·前端·javascript
四千岁
12 分钟前
RAG系统中的分块
前端·javascript·后端
骇客野人
15 分钟前
Java SSO 统一认证方案
java·开发语言
START_GAME
29 分钟前
MSSQL$SQL2016
java·服务器·前端
ydd100100
34 分钟前
字符串转换整数
java
Captaincc
36 分钟前
Show me your works & token -稀土掘金上线内测作品广场和用量统计
前端·掘金社区·vibecoding
进击的明明
1 小时前
闭包:JavaScript里的“随身背包” 🎒
前端·javascript·面试
会编程的吕洞宾
1 小时前
DeepAgents In Action学习(Second)
android·java·学习
梦梦代码精
1 小时前
基于UniApp+Vue3+ThinkPHP 8,这套知识付费系统的架构设计有点东西
java·低代码·docker·uni-app·开源·php
-凌凌漆-
1 小时前
【freertos】Task创建(v2)
java·开发语言·算法
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单(含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等)02GitHub 镜像站点03微信历史版本含下载地址( Windows PC | 安卓 | MAC )及设置微信不更新042026 国产 AI 大模型横评:DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打?05历年考研数学一、数学二、数学三真题试卷及答案PDF06Agnes AI 免费 API 接入指南:文本、生图、生视频,一套接口全免费07AI 编程 IDE 全景解析 2026:Agent 全面接管开发链路08VSCode+CodeX扩展,无法启动092026年7月AI圈大地震:GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片10如何新建文件夹? 电脑新建文件夹的4种方法