技术栈

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++要学到什么程度才能找到实习?
下一篇:操作系统与单片机
相关推荐
期待のcode
32 分钟前
原子操作类LongAdder
java·开发语言
舟舟亢亢
1 小时前
Java集合笔记总结
java·笔记
pas136
1 小时前
40-mini-vue 实现三种联合类型
前端·javascript·vue.js
小酒窝.
1 小时前
【多线程】多线程打印ABC
java
摇滚侠
1 小时前
2 小时快速入门 ES6 基础视频教程
前端·ecmascript·es6
乡野码圣
2 小时前
【RK3588 Android12】RCU机制
java·jvm·数据库
JAVA+C语言
2 小时前
如何优化 Java 多主机通信的性能?
java·开发语言·php
珑墨
2 小时前
【Turbo】使用介绍
前端
军军君01
3 小时前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
编程彩机
3 小时前
互联网大厂Java面试:从分布式架构到大数据场景解析
java·大数据·微服务·spark·kafka·分布式事务·分布式架构
热门推荐
01GitHub 镜像站点02Clawdbot 中文汉化版 接入微信、飞书03OpenCode 入门教程:介绍 · 安装 · 配置第三方 API (如 Claude)04OpenClaw部署与配置教程:在Mac mini上接入国产大模型与飞书05UV安装并设置国内源062026美赛A题智能手机电池续航时间预测的连续时间数学模型07Claude Code + GLM4.7 避坑指南:解决 Unable to connect to Anthropic services08Claude Code Skills 实用使用手册09Linux下V2Ray安装配置指南10在Trae中使用Pencil MCP