css心跳动画

图标引入

复制代码
<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>
相关推荐
无限的鲜花4 小时前
反射(原创推荐)
java·开发语言
IT二叔5 小时前
Java项目部署-03-teamcity-cicd-docker镜像流水线方式部署
java·ci/cd·持续部署
前端之虎陈随易5 小时前
编程语言级别的Skill市场,AI Agent 的未来形态
前端·vue.js·人工智能·typescript·node.js
一路向北he5 小时前
字节钢铁军团--“提供情境,而非控制”
java·开发语言·前端
kyriewen5 小时前
豆包和千问同时关了智能体,我用它们搭的 3 个自动化全废了——迁移方案整理
前端·javascript·ai编程
超级数据查看器5 小时前
超级数据查看器 v10.0 发布
java·大数据·数据库·sqlite·安卓
前端一小卒5 小时前
我用 TypeScript 从零手写了一个 Claude Code,然后发现它的核心只有 30 行
前端·agent
折哥的程序人生 · 物流技术专研6 小时前
《Java 100 天进阶之路》第50篇:阻塞队列与并发容器(2026版)
java·面试题·java进阶·blockingqueue·并发容器·集合源码·java100天进阶
ai_coder_ai7 小时前
编写自动化脚本,在自己后端服务中使用Open Api进行设备相关操作
java·运维·自动化
大圣编程7 小时前
Python中continue语句的用法是什么?
开发语言·前端·python