技术栈

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++要学到什么程度才能找到实习?
下一篇:操作系统与单片机
相关推荐
AI前端老薛
3 分钟前
CSS实现动画的几种方式
前端·css
携欢
6 分钟前
portswigger靶场之修改序列化数据类型通关秘籍
android·前端·网络·安全
GuMoYu
7 分钟前
npm link 测试本地依赖完整指南
前端·npm
pyniu
7 分钟前
Spring Boot车辆管理系统实战开发
java·spring boot·后端
代码老祖
8 分钟前
vue3 vue-pdf-embed实现pdf自定义分页+关键词高亮
前端·javascript
虾说羊
8 分钟前
ssm项目本地部署
java·tomcat
未等与你踏清风
8 分钟前
Elpis npm 包抽离总结
前端·javascript
资生算法程序员_畅想家_剑魔
8 分钟前
Kotlin常见技术分享-01-相对于Java 的核心优势-空安全
java·安全·kotlin
代码猎人
9 分钟前
如何使用for...of遍历对象
前端
热门推荐
01GitHub 镜像站点02安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口(持续更新)03Linux下V2Ray安装配置指南04Labelme从安装到标注:零基础完整指南05手把手教你通过Gemini3 pro 学生认证,白用一年,手慢无!06【踩坑笔记】50系显卡适配的 PyTorch 安装07jdk21下载、安装(Windows、Linux、macOS)08GitLab 零基础入门指南:从安装到项目管理全流程09Opencode CLI 安装成功,但是启动失败10UV安装并设置国内源