每次吃饭点外卖的时候（暴露了自己是个死肥宅，手动滑稽），或者在淘宝购物的时候，将商品加入购物车时会有一个很炫酷的动画，如下图饿了么点餐动画：
所以百度了一下前端使用css实现这个效果，然后就自己就照葫芦画瓢的写了一个小小的demo，完全当作学习了一把。
在界面上，我是参考了图片上的界面，写的css，然后在美团上面扒的数据。完成后的界面如下图：
开始想着只是做一个简单的实现效果，界面上只有div框，按钮什么的这些，反正想着很丑的界面，但是自己看到饿了么这么好看的界面，自己就忍不住模仿着写了一下下。
主要用到的是移动端适配方案：flexible.js + rem的方案
首先获取到页面上所有按钮，然后给按钮添加点击事件，获取到点击当前按钮的位置坐标信息
方案一：使用定位+transition的方式实现
方案二：使用transform + transition的方式实现
其实还可以使用css的animate来实现，只不过由于需要动态计算目标位置的坐标，实现起来比较困难，所以我就没有写，如果目标位置的坐标值固定，那么可以通过animate改变top、left或者translateX、translateY的值来实现这个效果，垂直方向的动画使用贝塞尔曲线的 function-timing 。
初识CSS抛物线动画
https://github.com/HyFun/CSS-Sample-ElemeAnimate
html5+css3能用代码生成好多小图标
举个例子
<ul><li class="search"><a href="#non">Search</a></li>
</ul>
<style type="text/css">
ul {
padding:0
margin:0
}
li {
position:relative
z-index:1
overflow:hidden
list-style:none
padding:0
margin:0 0 .24em
}
li a:link,
li a:visited {
display:block
border:0
padding-left:25px
color:#c55500
}
li a:hover,
li a:focus,
li a:active {
color:#730800
background:transparent
}
li:before,
li:after,
li a:before,
li a:after {
content:""
position:absolute
top:50%
left:0
}
li a:before,
li a:after {
margin:-8px 0 0
background:#c55500
}
li a:hover:before,
li a:focus:before,
li a:active:before {
background:#730800
}
.search a:before {
width:6px
height:6px
border:3px solid #c55500
background:transparent
/* css3 */
-webkit-border-radius:12px
-moz-border-radius:12px
border-radius:12px
}
.search a:after {
left:10px
width:3px
height:7px
margin-top:0
/* css3 */
-webkit-transform:rotate(-45deg)
-moz-transform:rotate(-45deg)
-o-transform:rotate(-45deg)
transform:rotate(-45deg)
}
.search a:hover:before,
.search a:focus:before,
.search a:active:before {
border-color:#730800
background:transparent
}
.search a:hover:after,
.search a:focus:after,
.search a:active:after {
background:#730800
}
</style>
