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>
相关推荐
IT_陈寒26 分钟前
Vue这个坑我跳了两次,原来问题出在这
前端·人工智能·后端
kyriewen29 分钟前
我用 50 行代码重写了 React Router 核心,终于搞懂了前端路由原理
前端·javascript·react.js
人活一口气1 小时前
Spring Boot与AIGC的完美结合:从零搭建智能内容生成平台
java·spring boot·aigc
llllk1 小时前
新手向逐段讲解
css
WebInfra1 小时前
Rspack 2.1 发布:React Compiler 提速 10 倍!
前端
李明卫杭州2 小时前
CSS 媒体查询详解:一文掌握响应式设计的核心技术
前端
lichenyang4532 小时前
从 H5 按钮到 OpenHarmony 能力调用:我如何理解 ASCF 的运行链路
前端
下家3 小时前
我放弃了 Vue/React,选择自研框架
前端·前端框架
Asize3 小时前
HTML5 Canvas 基础:从按帧动画到 ECharts 数据可视化
前端·javascript·canvas
像我这样帅的人丶你还3 小时前
Java 后端详解(三):全局异常处理与 JPA 数据库映射
java·后端