css心跳动画

图标引入

<img class="icon" src="heart.svg" alt="" srcset="">

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>

相关推荐

  1. 使用css制作心形图案并且添加动画心动效果

    2024-04-04 13:32:02       24 阅读
  2. css连续动画动画组)

    2024-04-04 13:32:02       26 阅读
  3. css 多种动画效果

    2024-04-04 13:32:02       65 阅读
  4. CSS3——动画

    2024-04-04 13:32:02       49 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-04 13:32:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-04 13:32:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-04 13:32:02       87 阅读
  4. Python语言-面向对象

    2024-04-04 13:32:02       96 阅读

热门阅读

  1. LeetCode | 数组 | 双指针法 | 27. 移除元素【C++】

    2024-04-04 13:32:02       37 阅读
  2. GDAL源码剖析(十二)之GDAL Warp API使用说明

    2024-04-04 13:32:02       34 阅读
  3. python实现TCP服务器

    2024-04-04 13:32:02       36 阅读
  4. NVM切换Node版本失败(已解决)

    2024-04-04 13:32:02       40 阅读
  5. 快速使用 Vision-RWKV 进行图像分类

    2024-04-04 13:32:02       47 阅读
  6. pip包安装用国内镜像源

    2024-04-04 13:32:02       35 阅读
  7. Python栈和队列

    2024-04-04 13:32:02       37 阅读
  8. PyTorch 常见用法介绍

    2024-04-04 13:32:02       39 阅读
  9. day1 | 数组 part-1 | 704 二分查找、27 移除元素

    2024-04-04 13:32:02       42 阅读
  10. 导入excel内容

    2024-04-04 13:32:02       33 阅读