如何使用纯CSS实现方块跳跃的动画
在网页动效开发中，纯CSS动画是提升页面交互体验的重要手段，无需依赖JavaScript就能实现流畅的视觉效果。本文将以方块跳跃动画为例，讲解如何通过CSS关键帧和变换属性实现完整的跳跃效果，包含位置移动、高度变化、落地反馈等细节。
实现原理
方块跳跃动画的核心逻辑分为三个部分：
- 使用
@keyframes定义动画的关键节点，控制方块的上下移动轨迹 - 通过
transform: translateY()实现垂直方向的位置偏移，模拟跳跃的起落 - 结合
animation属性将定义好的关键帧动画绑定到方块元素上，设置播放时长、循环方式等参数
基础代码结构
首先我们需要一个基础的HTML结构，仅包含一个用于展示跳跃方块的容器元素：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS方块跳跃动画</title>
<style>
/* 页面基础样式，让方块居中显示 */
body {
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
/* 方块基础样式 */
.jump-box {
width: 80px;
height: 80px;
background-color: #409eff;
border-radius: 8px;
/* 绑定跳跃动画，持续1.2秒，无限循环，匀速播放 */
animation: jump 1.2s infinite linear;
}
/* 定义跳跃动画的关键帧 */
@keyframes jump {
/* 起始状态：在地面 */
0% {
transform: translateY(0);
}
/* 上升到最高点的过程：向上移动120px */
30% {
transform: translateY(-120px);
}
/* 最高点状态：保持最高位置 */
50% {
transform: translateY(-120px);
}
/* 下落过程：回到地面 */
80% {
transform: translateY(0);
}
/* 落地轻微压扁效果，模拟重力反馈 */
90% {
transform: translateY(0) scaleY(0.85) scaleX(1.1);
}
/* 恢复原始状态，准备下一次跳跃 */
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<!-- 跳跃的方块元素 -->
<div class="jump-box"></div>
</body>
</html>代码说明
上述代码中，我们首先给页面设置了flex布局，让方块在视口中水平垂直居中，背景色为浅灰色，方便观察动画效果。
方块元素.jump-box定义了宽高80px、蓝色背景、8px圆角的样式，通过animation属性绑定了名为jump的关键帧动画，参数1.2s表示单次跳跃动画持续1.2秒，infinite表示动画无限循环，linear表示动画全程匀速播放。
关键帧@keyframes jump定义了动画的完整轨迹：0%时在初始位置（地面），30%时上升到最高点（向上偏移120px），50%时保持在最高点，80%时落回地面，90%时通过scaleY和scaleX实现落地时的轻微形变，模拟现实中的重力反馈，100%时恢复原始状态，完成一次完整的跳跃循环。
进阶优化：添加阴影增强真实感
为了让跳跃效果更真实，我们可以给方块添加随跳跃高度变化的阴影，模拟光影效果：
/* 优化后的方块样式，添加阴影过渡 */
.jump-box {
width: 80px;
height: 80px;
background-color: #409eff;
border-radius: 8px;
/* 初始阴影：地面上的阴影 */
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
animation: jump 1.2s infinite linear;
}
/* 优化后的关键帧，同步调整阴影效果 */
@keyframes jump {
0% {
transform: translateY(0);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}
30% {
transform: translateY(-120px);
/* 上升到最高点时，阴影变小变淡 */
box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
}
50% {
transform: translateY(-120px);
box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
}
80% {
transform: translateY(0);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}
90% {
transform: translateY(0) scaleY(0.85) scaleX(1.1);
box-shadow: 0 12px 18px rgba(0, 0, 0, 0.25);
}
100% {
transform: translateY(0);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}
}优化后的动画中，方块的阴影会随跳跃高度变化：上升时阴影变小变淡，下落落地时阴影加深，更符合人眼对真实物体运动的感知，动画的真实感会明显提升。
兼容性与扩展
以上代码使用的transform、animation、@keyframes都是CSS3标准属性，现代浏览器（Chrome、Firefox、Edge、Safari等）均支持，无需添加浏览器前缀即可正常运行。如果需要兼容更旧的浏览器，可以适当添加-webkit-、-moz-等前缀。
如果需要调整跳跃的高度、速度或者循环方式，只需要修改translateY的偏移值、animation的持续时间和循环参数即可，比如将infinite改为3就可以让方块只跳跃3次后停止。