技术栈

css心跳动画

—Qeyser2024-04-04 13:54

图标引入

复制代码
<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>
上一篇:C++要学到什么程度才能找到实习?
下一篇:操作系统与单片机
相关推荐
冴羽
几秒前
现代 CSS 颜色使用指南
前端·javascript·css
悟空码字
几秒前
SpringBoot整合MyBatis-Flex保姆级教程,看完就能上手!
java·spring boot·后端
cj8140
1 分钟前
动态表单与静态表单性能比较
前端
爬山算法
1 分钟前
Hibernate(43)Hibernate中的级联删除如何实现?
java·python·hibernate
J_liaty
2 分钟前
Java工程师的JVM入门教程:从零理解Java虚拟机
java·开发语言·jvm
qq_250056868
7 分钟前
SpringBoot 引入 smart-doc 接口文档插件
java·spring boot·后端
han_
7 分钟前
为啥 Array.isArray 判断数组最靠谱?
前端·javascript
前端糕手
9 分钟前
面试高频版
前端·html
珠穆峰
11 分钟前
linux清理缓存命令“echo 3 > /proc/sys/vm/drop_caches”
java·linux·缓存
掉头发的王富贵
14 分钟前
【2025年终总结】对象有了,工作没了
java·后端·年终总结
热门推荐
01GitHub 镜像站点02Linux下V2Ray安装配置指南03Labelme从安装到标注:零基础完整指南04Claude Code Skills 实用使用手册05AI 规范驱动开发“三剑客”深度对比:Spec-Kit、Kiro 与 OpenSpec 实战指南06网站改了域名,如何查找?07UV安装并设置国内源08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口(持续更新)09百度网盘偷偷给电脑“降频”?102025年大语言模型技术全景报告