【CSS动画】饿了么加入购物车抛物线动画实现

html-css022

【CSS动画】饿了么加入购物车抛物线动画实现,第1张

每次吃饭点外卖的时候（暴露了自己是个死肥宅，手动滑稽），或者在淘宝购物的时候，将商品加入购物车时会有一个很炫酷的动画，如下图饿了么点餐动画：

所以百度了一下前端使用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

用背景就可以呀

比如

a {

display:block //定义为块元素，才可以使用宽、高、背景

width:120px

height:40px

line-height:40px

color:#FFF

background:url(icon.gif) no-repeat 10px 15px #F00 //定义背景，图片不重复，距左10像素距顶15像素，背景图片覆盖不到的地方显示背景色#F00

text-indent:40px //文字缩进40像素，以不和icon重叠

}

以上具体的数字，根据效果来调整