CSS 实现跳动的方块动画

这篇文章距离上次修改已过442天，其中的内容可能已经有所变动。




/* 定义一个跳动的方块动画 */
.jumping-box {
  width: 50px;
  height: 50px;
  background-color: #333;
  margin: 30px 0;
  animation: jump 1s infinite;
}
 
/* 定义关键帧 */
@keyframes jump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

这段代码定义了一个.jumping-box类，当它被应用到HTML元素上时，会产生一个上下跳动的动画效果。动画通过@keyframes规则定义了元素在50%的时候向上移动10像素，并在动画的开始和结束时元素保持在原始位置。动画的持续时间是1秒，并且会无限次数地循环。

CSS 实现跳动的方块动画

评论已关闭

推荐阅读