CSS动画豆腐块弹跳

在网站设计和开发中，动画效果可以极大提升用户体验和页面吸引力。而CSS动画是一种简单且有效的方式来实现动画效果。在本文中，我们将详细介绍如何使用CSS动画来创建一个豆腐块弹跳的效果。

豆腐块弹跳动画效果

豆腐块弹跳的动画效果是指一个方块在页面中弹跳的过程。在这个效果中，方块会在水平和垂直方向上不断地移动，并在碰到边界时反弹。这种动画效果看起来像是一个物体在空间中自由运动的样子，增加了页面的活力和趣味性。

实现步骤

1. 创建HTML结构

首先，我们需要创建一个简单的HTML结构，用来放置方块元素。在本例中，我们创建一个<div>元素，作为我们的豆腐块，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animation Tofu Bounce</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="tofu"></div>
</body>
</html>

2. 添加CSS样式

接下来，我们需要使用CSS为豆腐块添加样式，并为其创建动画效果。我们使用transform属性来实现豆腐块的移动和反弹效果，同时使用@keyframes规则来定义动画的关键帧。

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}

.tofu {
    width: 50px;
    height: 50px;
    background-color: #3498db;
    position: relative;
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-100px);
    }
}

在上面的代码中，我们定义了一个.tofu类，设置了豆腐块的样式和颜色。我们还定义了@keyframes规则，指定了动画的关键帧。在这个示例中，动画会在0%和100%时豆腐块的位置不变，在50%时豆腐块会向上移动100像素。