参考：

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. Android基础新手教程——3.1 基于监听的事件处理机制

    Android基础新手教程--3.1.1 基于监听的事件处理机制 标签(空格分隔): Android基础新手教程 本节引言: 第二章我们学习的是Android的UI控件,我们能够利用这些控件构成一个精 ...

  2. （转）使用.NET Reflector 查看Unity引擎里面的DLL文件

    当你查看unity里面API的时候,是不是有时候追踪了一两步就碰到DLL文件走不下去了呢?很是不爽吧. 这种问题我也是经常碰到.这是人家商业引擎不想让你看到底层代码啦,所以着急不得. 不过,今天我终于 ...

  3. IOS控件：分歧解决其（UILabel 和 IBAction）

    #import <UIKit/UIKit.h> @interface demo7_dayViewController : UIViewController { // 用来显示程序结果 IB ...

  4. tarjan求强连通分量+缩点 模板

    #define N 100100 #define M 200200 int n,m; int id,index; //id表示缩点后点的id,index表示进行tarjan算法时访问的点先后 int ...

  5. Kotlin——高级篇（五）：集合之常用操作符汇总

    在上一篇文章Kotlin--高级篇(四):集合(Array.List.Set.Map)基础中讲解到了数组Array<T>.集合(List.Set.Map)的定义与初始化.但是由于篇幅的原因 ...

  6. css 中的事件冒泡

    css伪类中的表现类似于事件冒泡的,举个例子,当你滑过一个元素时,他会认为你也滑过了该元素的父元素,即使该元素看起来并没有包含在父元素里面,此处以:hover例子: 效果图: 滑过前: 滑过后: CS ...

  7. ClickHouse RPM packages installation from packagecloud.io

    Table of Contents Introduction Script-based installation Install script Install packages after scrip ...

  8. JS不改HTML任何代码就达到动态效果

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

  9. java 子类不能继承父类的static方法

    先来看一段代码 /** * Created by bjchengpeng on 2018/7/19. */ /**运行结果 * woof * woofaa * * woof * Basenjiaa * ...

  10. SQL 将列转成字符串并用逗号分隔

    SELECT STUFF((SELECT ',' + FieldName FROM TableName FOR XML PATH('')),1,1,'') AS T 其中的逗号可以换成其它字符 转换完 ...