要创建一个网球弹跳的动画,你可以使用CSS的关键帧动画(@keyframes
)。以下是一个简单的示例,展示了如何制作一个网球在地面上弹跳的动画:
- HTML结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网球弹跳动画</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="tennis-ball"></div>
</body>
</html>
- CSS样式和动画 (
styles.css
文件):
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.tennis-ball {
width: 50px;
height: 50px;
background-color: yellow;
border-radius: 50%;
animation: bounce 1s infinite alternate;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(-50px);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
在这个示例中:
- 我们使用了一个简单的
div
元素来表示网球。 - 通过CSS,我们给这个
div
设置了宽度、高度、背景色和边框半径,使其看起来像一个圆形的网球。 - 我们使用
@keyframes
定义了一个名为bounce
的动画,该动画会改变网球的垂直位置,从而创建弹跳效果。你可以通过调整transform: translateY(-50px);
中的值来改变弹跳的高度。 - 我们将动画应用到了网球元素上,并设置了动画的持续时间为1秒、无限次循环和交替方向(这样网球会在达到最高点时反向运动,形成连续的弹跳效果)。
- 我们还使用了
cubic-bezier()
函数来定义动画的速度曲线,使其看起来更自然。你可以调整这些值来改变动画的速度和弹跳感。