css3 div跳动动画_CSS3 创建网页动画实现弹跳球动效果

基础准备

对于这个实现，我们需要一个简单的 div ，并且样式类名为 ball ：

HTML 代码:

我们将使用 Flexbox 布局，把球放到页面中间，尺寸为 100px * 100px，背景色为橘黄色。

CSS 代码:

body {

display: flex; /* 使用Flex布局 */

justify-content: center; /* 水平居中 */

}

.ball {

width: 100px;

height: 100px;

border-radius: 50%; /* 把正方形变成圆形*/

background-color: #FF5722; /* 设置颜色为橙色*/

}

创建 Keyframe(关键帧)

Keyframe(关键帧) 用于 CSS 动画，以便我们完全控制动画。创建 Keyframe(关键帧) 的样式非常简单。我们使用关键字 @keyframes ，在后面跟动画名称：

CSS 代码:

@keyframes nameOfAnimation {

/* 代码 */

}

在这个示例中，我们把 keyframe(关键帧) 取名为 bounce。在 Keyframe 中，用 from 和 to 关键字来指定动画开始点和结尾点的 CSS 样式。

CSS 代码:

@keyframes bounce {

from { /* 开始