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>
相关推荐
967719 分钟前
理解IOC控制反转和spring容器,@Autowired的参数的作用
java·sql·spring
SY_FC19 分钟前
实现一个父组件引入了子组件,跳转到其他页面,其他页面返回回来重新加载子组件函数
java·前端·javascript
糟糕好吃21 分钟前
我让 AI 操作网页之后,开始不想点按钮了
前端·javascript·后端
陈天伟教授27 分钟前
人工智能应用- 天文学家的助手:08. 星系定位与分类
前端·javascript·数据库·人工智能·机器学习
VaJoy29 分钟前
给到夯!前端工具链新标杆 Vite Plus 初探
前端·vite
耀耀_很无聊37 分钟前
09_Jenkins安装JDK环境
java·运维·jenkins
ノBye~38 分钟前
Centos7.6 Docker安装redis(带密码 + 持久化)
java·redis·docker
黑臂麒麟40 分钟前
openYuanrong:多语言运行时独立部署以库集成简化 Serverless 架构 & 拓扑感知调度:提升函数运行时性能
java·架构·serverless·openyuanrong
XiaoLeisj1 小时前
Android Jetpack 页面架构实战:从 LiveData、ViewModel 到 DataBinding 的生命周期管理与数据绑定
android·java·架构·android jetpack·livedata·viewmodel·databinding
⑩-1 小时前
为什么要用消息队列?使用场景?
java·rabbitmq