目录
本文发布于 2年前，其中的信息可能已发生变化，请结合实际情况参考。

分享一个超可爱的CSS动画库

自己写了一套超可爱的CSS动画库，包含抖动、弹跳、心跳等效果，分享给大家~ 💕

动画效果一览

包含以下可爱动画：

  • cute-bounce - Q弹上下跳动
  • cute-shake - 害羞左右摇晃
  • cute-heartbeat - 心跳效果
  • cute-float - 漂浮上升
  • cute-wiggle - 扭扭捏捏

动画效果展示

使用方法

引入CSS文件，给元素加上对应类名即可：

html


<div class="cute-bounce">我会跳动！</div>
<div class="cute-heartbeat">我会心跳！</div>

核心代码示例

心跳动画的实现：

css
@keyframes cute-heartbeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.15); }
  50% { transform: scale(1); }
  75% { transform: scale(1.1); }
}

.cute-heartbeat {
  animation: cute-heartbeat 1.2s ease-in-out infinite;
}

代码效果

下载源码

完整源码已经打包好啦，欢迎下载使用~

下载源码

这套动画库主打「轻量」和「可爱」，纯CSS实现，无任何依赖。

动画演示

用在自己的博客上效果超棒，快来试试吧~ ✨