CSS3 创建网页动画实现弹跳球动效果


Posted in HTML / CSS onOctober 30, 2018

CSS3 创建网页动画实现弹跳球动效果

基础准备

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

HTML 代码:

<div class="ball"></div>

我们将使用 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 { /* 开始 */ }
to   { /* 结束   */ }
}

很简单是不是? 最后一步,我们可以添加我们的开始点和结尾点的 CSS 样式。为了创建反弹效果,我们将只是改变球的位置。transform 允许我们修改给定元素的坐标。以下是最终的 keyframe(关键帧) :

CSS 代码:

@keyframes bounce {
from { transform: translate3d(0, 0, 0);     }
to   { transform: translate3d(0, 200px, 0); }
}

我们使用 transform 让球沿着三维轴平移,translate3D 函数需要 3 个输入参数,即 (x, y, z) 。 因为我们想让球上下跳动,我们只需要沿着 y 轴进行平移。因此,动画结束点(即 to 中样式)的 y 值变成了 200px 。

运行 Keyframe(关键帧)

现在 @keyframe 已经创建了,是时候让它运行起来了!回到 .ball{} css 并添加以下行代码:

CSS 代码:

.ball {
/* ... */
animation: bounce 0.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
}

解释一下这三行代码:

告诉 ball 元素使用我们的 keyframe(关键帧) 规则反弹。 设置完成动画的时间长度为 .5 秒。

完成后,动画反方向执行(反转)。

无限次地运行动画。

真棒,到目前为止。 离我们想要的已经很近了,但还不完美:

它看起来不像一个弹跳的球。那是因为我们没有为动画设置速度曲线,默认会被设置为 ease。意思是动画的速度刚开始慢,中间变快,快结束的时候又变慢。不幸的是,这不是一个弹跳球的理想选择。幸运的是,我们可以使用 Math 来定制这个 速度曲线!

进入太多的细节,你可以使用 bezier(贝塞尔曲线) 来指定自定义动画时间。以下是附加的代码:

CSS 代码:

.ball {
/* ... */
animation: bounce 0.5s cubic-bezier(.5,0.05,1,.5);
}

当然这是用 CSS Animations(动画) 和 Keyframes(关键帧) 创建的最简单的动画效果.

总结

以上所述是小编给大家介绍的CSS3 创建网页动画实现弹跳球动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 #HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 #HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 #HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 #HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 #HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 #HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 #HTML / CSS
You might like
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
php数据访问之增删改查操作
2016/05/09 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
python图像处理之镜像实现方法
2015/05/30 Python
Python实时获取cmd的输出
2015/12/13 Python
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
详解Python pygame安装过程笔记
2017/06/05 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
Python中断多重循环的思路总结
2019/10/04 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
2014年情人节活动方案
2014/02/16 职场文书
交通安全寄语大全
2014/04/08 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
教师岗位职责
2015/02/03 职场文书
小学四年级作文之写景
2019/08/23 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript