参考：

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. iOS -转载-开发之个人开发者账号转公司开发者账号

    ps  :  个人开发者账号升级公司开发者账号的话需要账号开启双重认证,没有开启的话需要开启(不然走到可以升级的那步的话,点击update升级会提示为了安全起见需要账号开启双双重认证,反正我走到upd ...

  2. c++ wchar_t

    ·C语言相关 对应于char, C语言中也有宽字符内型wchar_t.wchar_t被定义为: typedef unsigned short wchar_t ;显然它是16位的.wchar_t类型的常 ...

  3. 编写高质量代码--改善python程序的建议（四）

    原文发表在我的博客主页,转载请注明出处! 建议十八:有节制的使用from...import语句 python提供了三种方式引入外部模块: import语句 from...import... __imp ...

  4. 隐藏内容但仍保持占位的css写法

    通常显示和隐藏内容都会用display:block;和display:none; 如果想要保持内容的占位可以用visbility:visible; 和visiblity:hidden;来控制内容的显示 ...

  5. 【Trello】使用指南

    一.谷歌浏览器插件推荐: Card Color Titles for Trello 在Card上现实标签的标题文字 Trellists: Trello Lists Master 允许展示和隐藏List ...

  6. screen命令在freebsd安装和使用

    安装 # cd /usr/ports/sysutils/screen # make install clean 使用 # screen //以下^A表示同按“Ctrl + A”键 # ^A c //C ...

  7. 学习使用turtlebot2——调试Hokuyo激光雷达(型号UST-10LX)

    目标 在ROS上调试使用Hokuyo激光雷达传感器 配置情况     电脑使用Ubuntu 14.04版本,ROS为 Indigo,激光雷达为Hokuyo(型号UST-10LX,网口型接口)   如果 ...

  8. scrapy工程创建及pycharm运行

    1.通过命令行创建scrapy工程项目 scrapy startproject (工程名) scrapy startproject myxml 2.利用爬虫模板设置爬虫文件 在这个过程中我们可以先利用 ...

  9. 深度扫盲O2O

    http://www.ftchinese.com/interactive/5038?i=3 http://www.ftchinese.com/interactive/5038?i=3

  10. （转） RabbitMQ学习之延时队列

    http://blog.csdn.net/zhu_tianwei/article/details/53563311 在实际的业务中我们会遇见生产者产生的消息,不立即消费,而是延时一段时间在消费.Rab ...