参考：

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. 第6步：检查grid安装环境

    6.1 检查系统包 grid 身份下校验安装环境(检测crs安装环境(sgdb1)) [root@node1 soft]#su – grid [grid@node1 ~]$ cd /soft/grid ...

  2. Eclipse用法和技巧

    http://blog.csdn.net/ts1122/article/category/1385337/2

  3. UIActionSheet样式问题心得

    下午在做一个iPad的项目,需要用到一个 UIActionSheet. 点击popView中的“sort”按钮,触发出一个ActionSheet. self.action = [[[UIActionS ...

  4. iOS-Pods里三方文件导入找不到头文件

    解决办法: 在target 里面 选择 build setting 搜索User Header Search Paths 然后 里面添加一条 ${SRCROOT}     recursive//后面填 ...

  5. 【BZOJ2212】[Poi2011]Tree Rotations 线段树合并

    [BZOJ2212][Poi2011]Tree Rotations Description Byteasar the gardener is growing a rare tree called Ro ...

  6. SharePoint BI

    本篇博客主要针对SharePoint BI整体结构进行整理,为读者分析几种Sharepoint BI场景 先附一张自己做的结构图:

  7. 创建TPL自定义模板

    文件布局 <!--1d7c7a527b6335cc7a623305ca940e1findex.tpl.html--> <!DOCTYPE html PUBLIC "-//W ...

  8. 巨蟒python全栈开发-第9天 初识函数

    一.今日主要内容总览(重点) 1.什么是函数? f(x)=x+1 y=x+1 函数是对功能或者动作的封装2.函数的语法和定义 def 函数名(): 函数体 调用:函数名()3.关于函数的返回值 ret ...

  9. C# WinForm 中进行UrlEncode

    public static string ToUrlEncode(string strCode) { StringBuilder sb = new StringBuilder(); byte[] by ...

  10. 转！！Java虚拟机堆的内存分配和回收

    Java内存分配和回收,主要就是指java堆的内存分配和回收.java堆一般分为2个大的区域,一块是新生代,一块是老年代.在新生代中又划分了3块区域,一块eden区域,两块surviver区域.一般称 ...