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使用多列制作瀑布流
May 10 HTML / CSS
CSS3弹性盒模型开发笔记(一)
Apr 26 HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
css3弹性盒模型实例介绍
May 27 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
css3 transform属性详解
Sep 30 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 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原理之Session Gc的一个小概率Notice
2011/04/12 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
详解在Python中处理异常的教程
2015/05/24 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
python3安装speech语音模块的方法
2018/12/24 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
小学班主任评语大全
2014/04/23 职场文书
期末复习计划
2015/01/19 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers
关于Redis的主从复制及哨兵问题
2022/06/16 Redis