技术栈

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++要学到什么程度才能找到实习?
下一篇:操作系统与单片机
相关推荐
嘉琪001
3 分钟前
Vue3+JS 高级前端面试题
开发语言·前端·javascript
招风的黑耳
9 分钟前
我用SpringBoot撸了一个智慧水务监控平台
java·spring boot·后端
xunyan6234
9 分钟前
面向对象(下)-接口的理解
java·开发语言
程序员游老板
13 分钟前
基于SpringBoot3+vue3的爱心陪诊平台
java·spring boot·毕业设计·软件工程·课程设计·信息与通信
期待のcode
15 分钟前
Springboot核心构建插件
java·spring boot·后端
遥不可及~~斌
18 分钟前
Java 面试题集 -- 001
java·开发语言
C18298182575
1 小时前
HttpURLConnection 与其他客户端关系
java
vipbic
1 小时前
用 Turborepo 打造 Strapi 插件开发的极速全栈体验
前端·javascript
天涯学馆
1 小时前
为什么 JavaScript 可以单线程却能处理异步?
前端·javascript
通往曙光的路上
1 小时前
发邮件1、创建邮箱
java
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04【AutoGLM部署】本地私有化部署AI手机Agent05在VSCode配置Java开发环境的保姆级教程(适配各类AI编程IDE)06Open-AutoGLM Windows 安装部署教程07Cursor 又偷偷更新,这个功能太实用:Visual Editor for Cursor Browser08BongoCat - 跨平台键盘猫动画工具09安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口(持续更新)10Labelme从安装到标注:零基础完整指南