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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
z-index不起作用
Mar 31 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/04/06 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
PHP 微信支付类 demo
2015/11/30 PHP
详解PHP PDO简单教程
2019/05/28 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
在Python中使用HTML模版的教程
2015/04/29 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
python中的global关键字的使用方法
2019/08/20 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
公司门卫管理制度
2014/02/01 职场文书
黄河的主人教学反思
2014/02/07 职场文书
法制宣传日活动总结
2014/04/29 职场文书
人事任命书范文
2014/06/04 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
暑假安全保证书
2015/02/28 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android