参考：

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：

<!DOCTYPE html>

<html>

    <head>

        <title>Dynamic Ball</title>

        <style>

            html {

                background: #F2F2F2;

            }

            p {

                font-family: helvetica, arial, sans-serif;

                text-align: center;

            }

            .ball {

                width: 100px;

                height: 100px;

                background: #FFF;

                box-shadow:0 10px 20px rgba(0,0,0,0.5);

                /*参数：水平阴影 竖直阴影 模糊距离！阴影的距离 阴影的颜色*/

                border-radius: 50%;

                animation: down 6s infinite;

                /*3s一次 无限次 */

            }

            @keyframes down {

                0% {

                    transform: translateY(-100px);

                }

                100% {

                    /*平移变换*/

                    transform: translateY(768px);

                }

            }

        </style>

    </head>

    <body>

        <p>Dynamic Ball</p>

        <div class="ball"></div>

    </body>

</html>

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Dynamic Ball</title>

        <style>

            html {

                background: #F2F2F2;

            }

            p {

                text-align: center;

            }

            .ball {

                width: 100px;

                height: 100px;

                background: #FFF;

                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);

                border-radius: 50%;

            }

        </style>

    </head>

    <body>

        <p>Dynamic Ball</p>

        <div class="ball"></div>

        <script>

            function animateBall() {

                var target = document.querySelector('.ball'); // 返回文档中匹配指定 CSS 选择器的一个元素

                var player = target.animate([

                    {transform: 'translateY(-50px)'},

                    {transform: 'translateY(768px)'},

                ], 7000);

                // 参数分别是 起始动画 结束动画 持续时间ms

            }

            animateBall();

        </script>

    </body>

</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:循环动画。。。缺点是控制还不够细致。。

        <script>

            function animateBall() {

                var target = document.querySelector('.ball'); // 返回文档中匹配指定 CSS 选择器的一个元素

                var player = target.animate([

                    {transform: 'translateY(100px)'},

                    {transform: 'translateY(600px)'},

                ], 4000); // 参数分别是 起始动画 结束动画 持续时间ms

            }

            //animateBall(); 循环调用animateBall();无法实现循环

            animateBall(); // 免去等待第一次间隔时间。

            setInterval("animateBall()", 4000);

        </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. （转）fock函数详解

    转自:http://www.cnblogs.com/bastard/archive/2012/08/31/2664896.html linux中fork()函数详解  一.fork入门知识 一个进程, ...

  2. java web 运动前端

    [写在前面的话:]前不久刚看到过一句话:说好的技术文章应该让读者感觉增加信心,而不是失去信心.有感于这句话是因为以前觉得发一些貌似高深的,看起来nb的东西才算一篇好博文,可是多少有点炫技的成分.可是后 ...

  3. JZOJ.5234【NOIP2017模拟8.7】外星人的路径

    Description 有一个外星人控制了你的大脑.一开始你处于原点(0,0).外星人有一个由(R,U,D,L)组成的长度为M 的操作序列,分别代表(右,上,下,左).平面上有N 个关键点,每当外星人 ...

  4. 160708、JQuery解析XML数据的demo

    用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 方案1 当后台返回的数据类型是xml对象 ...

  5. Minecraft Forge编程入门一 “环境搭建”

    什么是Forge Minecraft Forge is a Minecraft application programming interface (API) which allows almost ...

  6. 【转】SpringMVC 拦截器

    类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理. 常用场景: 1.日志记录:记录请求信息的日志,以便进行信息监控.信息统计.计算PV(Page View)等. 2.权限 ...

  7. PAT 1016 Phone Bills(模拟)

    1016. Phone Bills (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A long-di ...

  8. delphi xe----操作mongoDB驱动，TMongoWire(Delphi MongoDB Driver)

    所有例子来自:https://github.com/stijnsanders/TMongoWire Delphi MongoDB的驱动 一个Delphi的驱动程序来访问mongoDB的服务器.用jso ...

  9. 帝国CMS 7.2数据导入后的参数修正

    1.日期转时间戮,HTML文件名,目录名更改 update cms_ecms_jdba set newstime = UNIX_TIMESTAMP(submitTime),titleurl = CON ...

  10. django博客项目7

    ................