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>
相关推荐
月光有害5 分钟前
DDD 核心概念梳理:从领域模型到领域事件
java·ddd
Liora_Yvonne14 分钟前
为什么你写了3年前端还是搭不好一个项目
前端·架构
snow@li15 分钟前
Java:后端项目会有一个类似前端node_modules的目录吗 / jar包在本地仓库 ~/.m2/repository 中按版本共存
java·开发语言·前端
weedsfly17 分钟前
单例模式在前端中的正确打开方式
前端·javascript·面试
PedroQue9917 分钟前
uni-router新推useUniEventChannel,彻底解决页面通信难题
前端·uni-app
济*沧*海18 分钟前
创建springboot项目时会出现注释乱码情况
java·spring boot·后端
IT_陈寒18 分钟前
Vite冷启动快?我遇到了个奇怪的依赖问题
前端·人工智能·后端
geovindu18 分钟前
java: Builder Pattern
java·开发语言·后端·设计模式·建造者模式·生成器模式
2603_9552797019 分钟前
通过 brew upgrade cmake 升级到最新版本
前端
卓怡学长22 分钟前
w268基于springboot + vue 物流系统
java·数据库·vue.js·spring boot·spring·intellij-idea