使用css制作一个网球弹跳的动画

要创建一个网球弹跳的动画，你可以使用CSS的关键帧动画（@keyframes）。以下是一个简单的示例，展示了如何制作一个网球在地面上弹跳的动画：

  1. 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>
  1. 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()函数来定义动画的速度曲线，使其看起来更自然。你可以调整这些值来改变动画的速度和弹跳感。
posted @ 2024-12-27 09:17  王铁柱6  阅读(39)  评论(0)    收藏  举报