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>
相关推荐
程序员南飞40 分钟前
ps aux | grep smart_webrtc这条指令代表什么意思
java·linux·ubuntu·webrtc
弥琉撒到我44 分钟前
微服务swagger解析部署使用全流程
java·微服务·架构·swagger
一颗花生米。2 小时前
深入理解JavaScript 的原型继承
java·开发语言·javascript·原型模式
问道飞鱼2 小时前
Java基础-单例模式的实现
java·开发语言·单例模式
学习使我快乐012 小时前
JS进阶 3——深入面向对象、原型
开发语言·前端·javascript
bobostudio19952 小时前
TypeScript 设计模式之【策略模式】
前端·javascript·设计模式·typescript·策略模式
黄尚圈圈3 小时前
Vue 中引入 ECharts 的详细步骤与示例
前端·vue.js·echarts
浮华似水4 小时前
简洁之道 - React Hook Form
前端
ok!ko5 小时前
设计模式之原型模式(通俗易懂--代码辅助理解【Java版】)
java·设计模式·原型模式
正小安6 小时前
如何在微信小程序中实现分包加载和预下载
前端·微信小程序·小程序