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>
相关推荐
Moyo2032 分钟前
前端 -- react快速入门
前端·react.js·前端框架
東雪木5 分钟前
java学习—— 8 种基本数据类型 vs 包装类、自动装箱 / 拆箱底层原理
java·开发语言·java面试
whuhewei6 分钟前
在React中实现CSS动画的回放
前端·css·react.js
Lyyaoo.6 分钟前
【JAVA基础面经】JVM、JRE、JDK
java·开发语言·jvm
左左右右左右摇晃9 分钟前
ConcurrentHashMap 设计原理笔记
java·开发语言·笔记
keyborad pianist17 分钟前
包装类、泛型、集合
java
北海军17 分钟前
render el-select下拉框
前端·javascript·vue.js
华科易迅21 分钟前
Spring装配对象方法-构造方法
java·后端·spring
是小蟹呀^27 分钟前
Java 内部类详解:成员内部类、静态内部类、局部内部类与匿名内部类
java·内部类
We་ct36 分钟前
LeetCode 4. 寻找两个正序数组的中位数:二分优化思路详解
前端·数据结构·算法·leetcode·typescript·二分