基础准备
对于这个实现,我们需要一个简单的 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(关键帧) 创建的最简单的动画效果.

这里推荐一下我的前端学习交流群:784783012,里面都是学习前端的,自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴

点击:加入

CSS3 创建简单的网页动画 – 实现弹跳球动的更多相关文章

  1. 原生JS+ CSS3创建loading加载动画;

    效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...

  2. Magic CSS3 – 创建各种神奇的交互动画效果

    Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中.只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 ma ...

  3. CSS3网页动画

    CSS3网页动画 概要:CSS3变形是一些效果的集合 如:平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform)他们可以分别操控元素发生平移.旋转.缩放.倾斜等变化. 网页中能够实现 ...

  4. php网页,想弹出对话框, 消息框 简单代码

    php网页,想弹出对话框, 消息框 简单代码 <?php echo "<script language=\"JavaScript\">alert(\&q ...

  5. 创建简单动画(一) --- 常规hud

    先说下当前我为处理动画的思路: (新手上路, 老司机轻喷,如果有更好的实现方法请大神指教 感恩戴德) #1. 分析动画构成 #2. 如果是位移动画则考虑使用BasicAnimation或者Keyfra ...

  6. 一款基于css3和jquery实现的动画弹出层

    今天给大家分享一款基于css3和jquery实现的动画弹出层.这款弹出层初页面面一个显示弹出层按钮.单击该按钮时,弹出层以非常炫的动画形式出现.弹出层有关闭按钮,单击半闭按钮,弹出层关闭.效果图如下: ...

  7. CSS SANS – 神奇!使用 CSS3 创建的字体

    在我们的认识中,CSS 所能做的就是改变网页的排版布局,调整字间距等.然而,这里我们要介绍的则是使用 CSS3 制作字体.CSS SANS 可以通过 CSS 技术创建的A-Z字体,一起来围观下. 在线 ...

  8. 分享9款用HTML5/CSS3制作的动物人物动画

    1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 ...

  9. 创建简单的响应式HTML5模版

    创建简单的响应式HTML5模版 HTML5目前发展势头良好,已经逐渐得到大部分浏览器不同程度的支持.许多web开发者也已经学习到了不少关于HTML 5的基础知识并开始试图使用HTML 5制作网页.与此 ...

随机推荐

  1. POJ 2486

    因为苹果可能在不同的子树中,所以,很容易想到设状态dp_back[i][j]为以i点为树根走j步并回到i点的最大苹果数与dp_to[i][j]不回到i点的两个状态. 于是,转移方程就很明显了.只是注意 ...

  2. HTML5的未来

    2014年10月29日,万维网联盟(W3C)宣布,经过差点儿8年的艰辛努力.该标准规范终于终于制定完毕.之所以是8年,由于在1999年HTML4的规范制定以后,W3C对于HTML的发展.貌似就不再那么 ...

  3. hdu4861 Couple doubi---2014 Multi-University Training Contest 1

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4861 Couple doubi Time Limit: 2000/1000 MS (Java/Othe ...

  4. 数据挖掘十大经典算法--CART: 分类与回归树

    一.决策树的类型  在数据挖掘中,决策树主要有两种类型: 分类树 的输出是样本的类标. 回归树 的输出是一个实数 (比如房子的价格,病人呆在医院的时间等). 术语分类和回归树 (CART) 包括了上述 ...

  5. 【翻译自mos文章】 asmcmd cp命令不能拷贝大于2GB的文件。

    asmcmd cp命令不能拷贝大于2GB的文件. 參考原文: Asmcmd CP Command Can Not Copy Files Larger Than 2 GB (Doc ID 786258. ...

  6. luogu2714 四元组统计 莫比乌斯反演 组合数

    题目大意 给出一段序列,求其中最大公约数为1的四元组的个数. 思路 我们要用到反演.正难则反的思想.对于每一个大于1的数字\(x\),求出最大公约数为\(x\)的四元组的个数\(g(x)\),然后用排 ...

  7. SUSE glibc升级为2.18过程记录

    先验知识:1.运行时,动态库的装载依赖于ld-linux.so.6的实现,它查找共享库的顺序如下:(1)ld-linux.so.6在可执行的目标文件中被指定,可用readelf命令查看(2)ld-li ...

  8. HDU 1257(最小拦截系统)

    Description 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不 能超过前一发的高度.某天,雷达 ...

  9. 2017-3-10 leetcode 229 238 268

    今天登陆leetcode突然发现531被锁了,有种占了便宜的感觉哈哈哈! ================================================ leetcode229 Ma ...

  10. 11g Rac PSU20180116手动补丁升级步骤

    手动升级:软件包解压在新建的/home/grid/update 目录下ORACLE_HOME=/u01/app/oracle/product/11.2.0/dbhome_1GRID_HOME=/u01 ...