html: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBeeline/demo1.html
准备属性值：
本文使用js画直线，运用到css中的一些属性。
绘制的步骤：
在本例中，绘制直接使用鼠标。点击获得起始点，拖动到终点获得结束点，鼠标松开就绘制图形。
获得起始点：
获得结束点：
绘制直线：
使用了jquery中的animate()方法。
js: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBall/demo2.js
html: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBall/demo2.html
小球的属性：
创建小球：
使小球运动：
将之前的画直线的方法封装成一个固定起点和终点的类。
js: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawTrajectory/js/createLine.js
html: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawTrajectory/demo1.html
你是指下面这种小球吗？
这个是可以用jquery做的 它是一个jquery圆环统计插件circliful 来完成的
方法如下：
使用方法
<link href="css/jquery.circlify.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>
如果需要 fontawesome icons图片，请引入相关的CSS文件
将一个元素添加到页面中，并添加一个惟一的id值，并在data属性写上你需要的值，代码如下：
<div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="200" data-part="35" data-icon="long-arrow-up" data-icon-size="28" data-icon-color="#fff"></div>
写入JS初始化插件
$( document ).ready(function() {
$('#myStat').circliful()
})
参数
dimension / 元素的高度与宽度 / 默认值 200px X 200px
text / 圆环内显示的文本
info /圆环内text文本下方的文字信息 ，可以为空
width / 圆环的大小 / 默认值 15px
fontsize /文本的字体大小 / 默认 15px
percent / 百分比，可以是1到100间的任意数值
fgcolor / 圆环的前景色 / 默认值 #556b2f
bgcolor / 圆环的背景色 / 默认值 #eee
fill / 整个圆环的背景色 ，可以为空
type / 全环或是半环，设计 data-type="half" 显示成半圆环 / 默认值 circle
total / 总量，百分比，比如你有 750MB 空间， 350MB 是使用的. 你就可以这样设置 data-total="750" 和 data-part="350" ，圆环将会显示成百分比 36,85%
part
border / 圆环的边框.
icon / Fontawesome icon
iconsize / icon的大小
iconcolor / icon的颜色
animationstep /动画的步阶, use 0 to disable animation, 0.5 to slow down, 2 to speed up, etc / default is 1
startdegree / 开始前景动的位置 / 默认值 0
bordersize / 边框的宽度
操场轨迹上下两边为直线，左右为半圆。
选择用纯css分成四段控制动画，最终效果如图：
详细分析：
创建HTML：
HTML非常简单，2个div嵌套，里面的point就是点，调整外面的layout的top，left和rotate做出动画效果。
<div class="layout"><div class="point"></div>
</div>
核心css：
去掉了浏览器兼容用的代码。
把动画分成四个部分：上方直线->右边半圆->下方直线->左边半圆。
最巧妙的地方在于，layout其实是一个长方型，把点放在长方型的一头，通过旋转layout使点旋转，去掉代码中注释的红色背景就能看到如下效果：
.layout{width:10px
height:150px
position:relative
margin-left:100px
margin-top:50px
/*background:red*/
animation-name:rotate
animation-duration:2s
animation-timing-function:linear
animation-iteration-count:infinite
animation-direction:alternate
animation-play-state:running
animation-direction:normal
}
@-webkit-keyframes rotate{
0% { left:0px top:0px
transform:rotate(0deg)
}
25% { left:150px top:0px
transform:rotate(0deg)
}
50% { left:150px top:50px
transform:rotate(180deg)
}
75% { left:0px top:50px
transform:rotate(180deg)
}
100%{ left:0px top:0px
transform:rotate(360deg)
}
}
完整代码:
<html><head>
<style>
.point{
width:10px
height:10px
background:blue
position:relative
border-radius:5px
margin:0 auto
}
.layout{
width:10px
height:150px
position:relative
margin-left:100px
margin-top:50px
/*background:red*/
animation-name:rotate
animation-duration:2s
animation-timing-function:linear
animation-iteration-count:infinite
animation-direction:alternate
animation-play-state:running
animation-direction:normal
/* Chrome: */
-webkit-animation-name:rotate
-webkit-animation-duration:2s
-webkit-animation-timing-function:linear
-webkit-animation-iteration-count:infinite
-webkit-animation-play-state:running
-webkit-animation-direction:normal
/* Firefox: */
-moz-animation-name:rotate
-moz-animation-duration:2s
-moz-animation-timing-function:linear
-moz-animation-iteration-count:infinite
-moz-animation-direction:alternate
-moz-animation-play-state:running
-moz-animation-direction:normal
/* Opera: */
-o-animation-name:rotate
-o-animation-duration:2s
-o-animation-timing-function:linear
-o-animation-iteration-count:infinite
-o-animation-direction:alternate
-o-animation-play-state:running
-o-animation-direction:normal
}
@-webkit-keyframes rotate{
0% { left:0px top:0px
transform:rotate(0deg)
-ms-transform:rotate(0deg) /* IE 9 */
-moz-transform:rotate(0deg) /* Firefox */
-webkit-transform:rotate(0deg) /* Chrome */
-o-transform:rotate(0deg) /* Opera */
}
25% { left:150px top:0px
transform:rotate(0deg)
-ms-transform:rotate(0deg) /* IE 9 */
-moz-transform:rotate(0deg) /* Firefox */
-webkit-transform:rotate(0deg) /* Chrome */
-o-transform:rotate(0deg) /* Opera */
}
50% { left:150px top:50px
transform:rotate(180deg)
-ms-transform:rotate(180deg) /* IE 9 */
-moz-transform:rotate(180deg) /* Firefox */
-webkit-transform:rotate(180deg) /* Chrome */
-o-transform:rotate(180deg) /* Opera */
}
75% { left:0px top:50px
transform:rotate(180deg)
-ms-transform:rotate(180deg) /* IE 9 */
-moz-transform:rotate(180deg) /* Firefox */
-webkit-transform:rotate(180deg) /* Chrome */
-o-transform:rotate(180deg) /* Opera */
}
100%{ left:0px top:0px
transform:rotate(360deg)
-ms-transform:rotate(360deg) /* IE 9 */
-moz-transform:rotate(360deg) /* Firefox */
-webkit-transform:rotate(360deg) /* Chrome */
-o-transform:rotate(360deg) /* Opera */
}
}
</style>
</head>
<body>
<div class="layout">
<div class="point"></div>
</div>
</body>
</html>
