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>
相关推荐
非 白20 分钟前
【Java】单例模式
java·笔记·单例模式
qianmoQ22 分钟前
第五章:工程化实践 - 第三节 - Tailwind CSS 大型项目最佳实践
前端·css
IDRSolutions_CN34 分钟前
如何在 PDF 文件中嵌入自定义数据
java·经验分享·pdf·软件工程·团队开发
椰果uu37 分钟前
前端八股万文总结——JS+ES6
前端·javascript·es6
_风中无我。40 分钟前
Spring的过滤器获取请求体中JSON参数,同时解决Controller获取不到请求体参数的问题。
java·spring·json
bing_1581 小时前
Spring Boot 中为什么 需要限流、降级和熔断?
java
微wx笑1 小时前
chrome扩展程序如何实现国际化
前端·chrome
ccm031 小时前
高效开发助手:深入了解Hutool工具库
java·g工具库
雪落南城1 小时前
【Maven】maven加载不到包
java·maven
~废弃回忆 �༄1 小时前
CSS中伪类选择器
前端·javascript·css·css中伪类选择器