参考：
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 {
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
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>