写一个小球上下跳动的动画

在前端开发中，你可以使用HTML、CSS和JavaScript来创建一个简单的小球上下跳动的动画。下面是一个示例代码：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bouncing Ball Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="ball"></div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
}

.ball {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    position: relative;
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(-100px);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

在这个示例中，我们创建了一个div元素来表示小球，并为其应用了一个CSS类.ball。通过CSS的@keyframes规则，我们定义了一个名为bounce的动画，该动画会在1秒内无限次地运行。在动画的不同阶段，我们使用transform属性来改变小球在垂直方向上的位置，从而实现上下跳动的效果。animation-timing-function属性用于控制动画的速度曲线，使小球的跳动看起来更自然。

你可以将上述HTML代码保存为一个.html文件，CSS代码保存为一个.css文件（例如styles.css），并确保它们在同一个目录下。然后，通过浏览器打开HTML文件，你将看到一个小球在页面中心上下跳动的动画效果。

请注意，上述示例中的动画效果是简单的上下跳动，你可以根据需要调整动画的持续时间、跳动高度和速度曲线等参数来定制自己的动画效果。

posted @ 2024-12-20 09:35  王铁柱6  阅读(169)  评论(0)    收藏  举报