css代码实现兔子动 |css 向右菜单

/*设置兔子的初始状态*/
.rabbit {
position: absolute;
top: 200px;
left: 50px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: pink;
transition: all 0.5s;
}
/*兔子跳跃的动画*/
.rabbit:active {
animation: jump 0.5s linear;
transform-origin: bottom;
}
/*定义兔子跳跃的关键帧*/
@keyframes jump {
0% {
transform: translateY(0) rotate(-20deg);
}
50% {
transform: translateY(-100px) rotate(0);
}
100% {
transform: translateY(0) rotate(20deg);
}
}

代码解释：

首先，大家给兔子(rabbit)设置了初始状态，包括位置、大小、形状、背景色和过渡效果。在兔子被点击(active)时，应用了名为jump的动画，持续0.5秒，以线性方式进行。还设置了动画的原点为底部(bottom)。

jump动画是由3个关键帧(keyframes)组成的。第一个关键帧(0%)表示兔子在起跳前的状态，向上跳时带有-20度的旋转；第二个关键帧(50%)表示兔子在跳跃过程中的状态，沿Y轴上移100像素，并没有旋转；第三个关键帧(100%)表示兔子在落下后的状态，向下落时带有20度的旋转。

通过以上CSS代码，大家就实现了一个可爱的兔子跳跃的动画效果。