基础准备
对于这个实现,我们需要一个简单的<代码> div> :
HTML代码:
<代码> & lt; div类=扒颉痹? lt;/div>
我们将使用Flexbox布的局,把球放到页面中间,尺寸为100 px * 100 px,背景色为橘色。
CSS代码:
<代码>身体{
显示:flex;/*使用Flex布局*/justify-content:中心;/*水平居中*/}
.ball {
宽度:100 px;
身高:100 px;
这个特性:50%;/*把正方形变成圆形*/background - color: # FF5722;/*设置颜色为橙色*/}
<>强创建关键帧(关键帧)
关键帧(关键帧)用于CSS动画,以便我们完全控制动画。创建关键帧(关键帧)的样式非常简单。我们使用关键字<代码> @keyframes>
CSS代码:
<代码> @keyframes nameOfAnimation {/*代码*/}
在这个示例中,我们把关键帧(关键帧)取名为反弹。在关键帧中,用从和关键字来指定动画开始点和结尾点的CSS样式。
CSS代码:
<代码> @keyframes反弹{
{/*开始*/}
{/*结束*/}
}
网络前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
很简单是不是什么?最后一步,我们可以添加我们的开始点和结尾点的CSS样式。为了创建反弹效果,我们将只是改变球的位置.transform允许我们修改给定元素的坐标。以下是最终的关键帧(关键帧):
CSS代码:
<代码> @keyframes反弹{
从{变换:translate3d (0, 0, 0);}
{变换:translate3d (0, 200 px, 0);}
}
我们使用变换让球沿着三维轴平移,translate3D函数需要3个输入参数,即(x, y, z)。因为我们想让球上下跳的动,我们只需要沿着y轴进行平移。因此,动画结束点(即中样式)的y值变成了200 px。
<>强运行关键帧(关键帧)
现在<代码> @keyframe> 。球{}css代码并添加以下行代码:
CSS代码:
<代码>。球{/*……*/动画:反弹0.5秒;
动画方向:备用;
animation-iteration-count:无限;
}
解释一下这三行代码:
告诉球元素使用我们的关键帧(关键帧)规则反弹。设置完成动画的时间长度为5秒。
完成后,动画反方向执行(反转)。
无限次地运行动画。
真棒,到目前为止。离我们想要的已经很近了,但还不完美:
它看起来不像一个弹跳的球。那是因为我们没有为动画设置速度曲线,默认会被设置为缓解。意思是动画的速度刚开始慢,中间变快,快结束的时候又变慢。不幸的是,这不是一个弹跳球的理想选择。幸运的是,我们可以使用数学来定制这个速度曲线!
进入太多的细节,你可以使用贝塞尔曲线(贝塞尔曲线)来指定自定义动画时间。以下是附加的代码:
CSS代码:
<代码> .ball {/*……*/动画:反弹0.5年代cubic-bezier (5、0.05、1、5);
}
当然这是用CSS动画(动画)和关键帧(关键帧)创建的最简单的动画效果。
网络前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频) 
