制作一個(gè)可愛(ài)的兔子跳躍的動(dòng)畫(huà)，需要用到CSS3的過(guò)渡(transition)和動(dòng)畫(huà)(animation)屬性。下面是實(shí)現(xiàn)兔子動(dòng)畫(huà)的CSS代碼：

/*設(shè)置兔子的初始狀態(tài)*/
.rabbit {
position: absolute;
top: 200px;
left: 50px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: pink;
transition: all 0.5s;
}
/*兔子跳躍的動(dòng)畫(huà)*/
.rabbit:active {
animation: jump 0.5s linear;
transform-origin: bottom;
}
/*定義兔子跳躍的關(guān)鍵幀*/
@keyframes jump {
0% {
transform: translateY(0) rotate(-20deg);
}
50% {
transform: translateY(-100px) rotate(0);
}
100% {
transform: translateY(0) rotate(20deg);
}
}

代碼解釋?zhuān)?/p>

首先，我們給兔子(rabbit)設(shè)置了初始狀態(tài)，包括位置、大小、形狀、背景色和過(guò)渡效果。在兔子被點(diǎn)擊(active)時(shí)，應(yīng)用了名為jump的動(dòng)畫(huà)，持續(xù)0.5秒，以線(xiàn)性方式進(jìn)行。還設(shè)置了動(dòng)畫(huà)的原點(diǎn)為底部(bottom)。

jump動(dòng)畫(huà)是由3個(gè)關(guān)鍵幀(keyframes)組成的。第一個(gè)關(guān)鍵幀(0%)表示兔子在起跳前的狀態(tài)，向上跳時(shí)帶有-20度的旋轉(zhuǎn)；第二個(gè)關(guān)鍵幀(50%)表示兔子在跳躍過(guò)程中的狀態(tài)，沿Y軸上移100像素，并沒(méi)有旋轉(zhuǎn)；第三個(gè)關(guān)鍵幀(100%)表示兔子在落下后的狀態(tài)，向下落時(shí)帶有20度的旋轉(zhuǎn)。

通過(guò)以上CSS代碼，我們就實(shí)現(xiàn)了一個(gè)可愛(ài)的兔子跳躍的動(dòng)畫(huà)效果。