CSS 实现跳动的方块动画
/* 定义一个跳动的方块动画 */
.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秒，并且会无限次数地循环。
评论已关闭