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 选择器 属性选择器介绍
Jan 21 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
css3的transform中scale缩放详解
Dec 08 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 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下对数组进行排序的函数
2010/08/08 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
Vue Element校验validate的实例
2020/09/21 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
python多线程编程中的join函数使用心得
2014/09/02 Python
Python中按值来获取指定的键
2019/03/04 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
python opencv如何实现图片绘制
2020/01/19 Python
python 伯努利分布详解
2020/02/25 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
通用求职信范文模板分享
2013/12/27 职场文书
委托书范文
2014/04/02 职场文书
司法所长先进事迹
2014/06/02 职场文书
银行转正自我鉴定
2014/09/29 职场文书
工作保证书
2015/01/17 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
mysql 子查询的使用
2022/04/28 MySQL
关于的python五子棋的算法
2022/05/02 Python