参考：

1、CSS 对比 JavaScript 动画

2、CSS制作水平垂直居中对齐_水平居中, 垂直居中 教程_w3cplus：https://www.w3cplus.com/css/vertically-center-content-with-css

3、box-shadow：http://www.w3school.com.cn/cssref/pr_box-shadow.asp

4、css平移：http://webkkl.com/style/translate.php、https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

5、css动画：http://www.cnblogs.com/xkxf/p/6718391.html

效果图：

思路：

1、画一个静态的小球。

2、修改成动态。

代码：基本参考url1。。。

css：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Dynamic Ball</title>
  5.         <style>
  6.             html {
  7.                 background: #F2F2F2;
  8.             }
  9.  
  10.             p {
  11.                 font-family: helvetica, arial, sans-serif;
  12.                 text-align: center;
  13.             }
  14.  
  15.             .ball {
  16.                 width: 100px;
  17.                 height: 100px;
  18.  
  19.                 background: #FFF;
  20.                 box-shadow:0 10px 20px rgba(0,0,0,0.5);
  21.                 /*参数：水平阴影 竖直阴影 模糊距离！阴影的距离 阴影的颜色*/
  22.  
  23.                 border-radius: 50%;
  24.  
  25.                 animation: down 6s infinite;
  26.                 /*3s一次 无限次 */
  27.             }
  28.  
  29.             @keyframes down {
  30.                 0% {
  31.                     transform: translateY(-100px);
  32.                 }
  33.                 100% {
  34.                     /*平移变换*/
  35.                     transform: translateY(768px);
  36.                 }
  37.             }
  38.         </style>
  39.     </head>
  40.     <body>
  41.         <p>Dynamic Ball</p>
  42.         <div class="ball"></div>
  43.     </body>
  44. </html>

JavaScript：貌似本质还是css，只不过用JS增强了控制。。。循环播放没解决。。。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Dynamic Ball</title>
  6.         <style>
  7.             html {
  8.                 background: #F2F2F2;
  9.             }
  10.  
  11.             p {
  12.                 text-align: center;
  13.             }
  14.  
  15.             .ball {
  16.                 width: 100px;
  17.                 height: 100px;
  18.  
  19.                 background: #FFF;
  20.                 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  21.  
  22.                 border-radius: 50%;
  23.             }
  24.         </style>
  25.     </head>
  26.     <body>
  27.         <p>Dynamic Ball</p>
  28.         <div class="ball"></div>
  29.  
  30.         <script>
  31.             function animateBall() {
  32.                 var target = document.querySelector('.ball'); // 返回文档中匹配指定 CSS 选择器的一个元素
  33.                 var player = target.animate([
  34.                     {transform: 'translateY(-50px)'},
  35.                     {transform: 'translateY(768px)'},
  36.                 ], 7000);
  37.                 // 参数分别是 起始动画 结束动画 持续时间ms
  38.             }
  39.             animateBall();
  40.         </script>
  41.     </body>
  42. </html>

参考2：循环动画

1、http://blog.sina.com.cn/s/blog_448f59f30102vvoj.html

2、http://www.open-open.com/lib/view/open1471745095074.html

3、廖雪峰JavasCript

4、setTimeout:http://www.w3school.com.cn/jsref/met_win_settimeout.asp

5、setInterval：http://www.jb51.net/shouce/htmldom/jb51.net.htmldom/htmldom/met_win_setinterval.asp.html

Interval：间隔。

JavaScript:循环动画。。。缺点是控制还不够细致。。

  1.         <script>
  2.             function animateBall() {
  3.                 var target = document.querySelector('.ball'); // 返回文档中匹配指定 CSS 选择器的一个元素
  4.                 var player = target.animate([
  5.                     {transform: 'translateY(100px)'},
  6.                     {transform: 'translateY(600px)'},
  7.                 ], 4000); // 参数分别是 起始动画 结束动画 持续时间ms
  8.             }
  9.             //animateBall(); 循环调用animateBall();无法实现循环
  10.             animateBall(); // 免去等待第一次间隔时间。
  11.             setInterval("animateBall()", 4000);
  12.         </script>

【JavaScript】动态的小球的更多相关文章

  1. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...

  3. Javascript动态调整文章的行距、字体、颜色，及打印页面和关闭窗口功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Javascript动态加载Html元素到页面Dom文档结构时执行顺序的不同

    我们有时会通过ajax动态获取一段Html代码,并且将这段代码通过javascript放到页面的Dom结构中去. 而很多时候通过ajax动态获取的Html代码中也包含javascript代码,有一点需 ...

  5. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  6. JavaScript动态更改页面元素

    通过JavaScript动态变化HTML元素 至HTML加元 首先需要创建一个标签,然后添加到标签中的相应的内容.然后创建添加到相应的位置好标签. <!DOCTYPE html PUBLIC & ...

  7. Javascript动态生成的页面信息爬取和openpyxl包FAQ小记

    最近,笔者在使用Requests模拟浏览器发送Post请求时,发现程序返回的html与浏览器F12观察到的略有不同,经过观察返回的response.text,cookies确认有效,因为我们可以看到返 ...

  8. Javascript动态引用CSS文件的2种方法介绍

    最近做一个项目,需要javascript动态插入样式,结果以前的方法失效了!查了2个小时的原因竟然是自己手贱,这个最后再说! javascript插入样式在前端开发中应用比较广泛,特别是在修改前端表现 ...

  9. JavaScript动态修改html组件form的action属性

    用javaScript动态修改html组件form的action属性,可以在提交时再决定处理表单的页面. <%--JavaScript部分--%><script language=& ...

  10. 面向对象的JavaScript --- 动态类型语言

    面向对象的JavaScript --- 动态类型语言 动态类型语言与面向接口编程 JavaScript 没有提供传统面向对象语言中的类式继承,而是通过原型委托的方式来实现对象与对象之间的继承. Jav ...

随机推荐

  1. [翻译]创建ASP.NET WebApi RESTful 服务（11）

    本章介绍通过使用Ali Kheyrollahi开发的CacheCow来实现服务器端的缓存.所有代码现在都可以在GitHub上下载. 我们将要实现的缓存方式叫做Conditional Requests, ...

  2. Spring工具类

    文件资源访问 1.统一资源访问接口 Resource 2.实现类 FileSystemResource 通过文件系统路径访问 ClassPathResource 通过classpath路径访问 Ser ...

  3. MathType编辑钢筋符号就是这么简单

    很多的用户在使用MathType公式编辑器的时候,发现它所包含的符号非常的多,几乎你在数学中看到的任何符号都能用MathType编辑出来.它能够满足各个学科对符号的需求,除了常规的数学物理符号之外,也 ...

  4. Python_selenium之获取页面上的全部邮箱

    Python_selenium之获取页面上的全部邮箱 一.思路拆分 获取网页(这里以百度的“联系我们”为例),网址http://home.baidu.com/contact.html 获取页面的全部内 ...

  5. Windows 8.1 浏览器中 SkyDrive 的改名与隐藏

    在 Windows 8.1 中已经整合了 SkyDrive ,在中文版中 SkyDrive 的名字总是感觉不协调,可是在属性里面可以调整位置却不能修改名称,怎么办呢? 打开注册表,找到 HKEY_CL ...

  6. SQL语句的添加、删除、修改多种方法 —— 基本操作

    添加.删除.修改使用db.Execute(Sql)命令执行操作 ╔----------------╗ ☆ 数据记录筛选 ☆ ╚----------------╝ 注意:单双引号的用法可能有误(没有测试 ...

  7. 【BZOJ4152】[AMPPZ2014]The Captain 最短路

    [BZOJ4152][AMPPZ2014]The Captain Description 给定平面上的n个点,定义(x1,y1)到(x2,y2)的费用为min(|x1-x2|,|y1-y2|),求从1 ...

  8. iOS UITextView 输入内容实时更新cell的高度

    iOS UITextView 输入内容实时更新cell的高度 2014-12-26 11:37 编辑: suiling 分类:iOS开发 来源:Vito Zhang'blog  11 4741 UIT ...

  9. log4j中将SocketAppender将日志内容发送到远程服务器

    1.服务端配置 1)服务端配置文件log4j-server.properties #Define a narrow log category. A category like debug will p ...

  10. JS改变HTML元素的绝对坐标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...