📅 最后修改于: 2023-12-03 14:51:51.400000 🧑 作者: Mango
在开发网页时，我们经常需要加入动画效果来增强页面的交互性和吸引力。其中一种常见的动画效果就是弹跳动画。在这篇文章中，我们将使用 CSS 来制作一个平滑的弹跳动画。
首先，在 HTML 中创建一个 div 元素，并为其添加样式类名，如下所示：
<div class="box"></div>
接下来，我们需要设置 box 类的初始样式。具体来说，我们将设置其宽度、高度、背景颜色和位置等属性。
.box {
width: 100px;
height: 100px;
background-color: #4285f4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
此处，我们使用了 transform 属性将元素向左、向上移动 50% 的距离，以使其居中对齐。
现在，我们将添加动画效果。具体来说，我们需要设置 box 类在收缩到最小大小后逐渐恢复到原来大小的效果。为此，我们将使用 CSS3 的 transition 属性。
.box {
width: 100px;
height: 100px;
background-color: #4285f4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease-in-out;
}
其中，all 属性表示应用动画效果的所有属性，0.5s 表示动画的持续时间，而 ease-in-out 表示动画的缓动类型。
最后，我们需要添加键桥帧动画，以定义 box 类在动画中的行为。具体来说，我们将设置三个关键帧：一个表示初始状态，一个表示中间状态，一个表示最终状态。
.box {
width: 100px;
height: 100px;
background-color: #4285f4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease-in-out;
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
此处，我们使用了 animation-name、animation-duration 和 animation-iteration-count 属性来定义动画的名称、持续时间和重复次数。而 @keyframes 规则则表示动画的关键帧。在上述代码中，我们设定了元素从下往上弹跳回到原位，过程分为三个阶段：第一阶段元素需要上弹到 50px，第二阶段它需要回到原始位置的一半左右，第三阶段它又回到了原始位置。
至此，我们使用 CSS 成功制作了一个平滑的弹跳动画。您可以在您的网站中使用此动画效果来增强页面的吸引力和交互性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹跳动画</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #4285f4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease-in-out;
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>