参考：

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. 读取csv格式的数据

    1.直接上代码,关键是会用 2.代码如下: <?php #添加推荐到英文站 $file = fopen('code.csv','r'); while ($data = fgetcsv($file ...

  2. （转）Unity笔记之编辑器（BeginToggleGroup、BoundsField、ColorField） ...

    1. BeginToggleGroup() BeginToggleGroup函数是定义了一个控制范围,可以控制该范围中的GUI是否启用,看下演示代码: [code]csharpcode: using ...

  3. Android版微信小代码(转)

    以下代码仅适用于Android版微信: //switchtabpos:让微信tab更贴合Android Design 如果你并不喜欢微信Android版和iOS端同用一套UI,现在有一个小方法可以实现 ...

  4. Java定时任务：利用java Timer类实现定时执行任务的功能

    一.概述 在java中实现定时执行任务的功能,主要用到两个类,Timer和TimerTask类.其中Timer是用来在一个后台线程按指定的计划来执行指定的任务. TimerTask一个抽象类,它的子类 ...

  5. 【Cygwin】Windows下使用linux命令

    我参阅了这份文章: 让windows cmd也用上linux命令 原文时间有点久了,Cygwin也更新了... 所以我的做法简单了很多... 到Cygwin官网下载安装包:https://cygwin ...

  6. jCarousel.js 插件

    轮播图 中间放大 内容跟着切换 (参考 米趣 网站) html   <div class="jcarousel-wrapper"> <div class=&quo ...

  7. 讨论cocos2d-x字体绘制原理和应用方案

    转自:http://blog.csdn.net/langresser_king/article/details/9012789 个人一直认为,文字绘制是cocos2d-x最薄弱的环节.对于愤怒的小鸟之 ...

  8. Vue.js_判断与循环

    一.判断,条件语句 1.一元表达式判断 {{ ok ? 'show' : 'hide' }} 2.if判断 v-if='ok' <ol id="ifGrammar"> ...

  9. Android编译系统入门（一）

    做过Android平台开发的朋友对make,mm或make clean命令应该很熟悉,但也许大家只是熟知这些命令的作用却不知道这些命令底下有些什么原理?那么今天我就带着大家推开Android编译系统的 ...

  10. java 如何将实体bean和map互转化 （利用Introspector内省）

    // 将一个map对象转化为bean public static void transMap2Bean(Map<String, Object> map, Object obj) { try ...