CSS3仿移动淘宝左下角扇形菜单效果

一：淘宝效果

分析：

1. 动画效果--CSS3
2. 显示隐藏--jquery
3. 橙色背景---图案

等下的例子里面用的是CSS背景色配合 border-top-left-radius: 100%样式实现，但在移动端的浏览器中查看，是不兼容的，所以说如果用在移动端的话建议和淘宝一样的做法，用背景图实现。

移动端：

PC端：

二：前期准备：

 关于不规则图形上的点击事件：

建议用热点

注意：

area 位置相当于定位了的z-index，越是靠前相当于z-index越大  如下面圆形热点circle 就是在页面中最靠近我们的， 画热点的时候位置一定要对应好，免得点击范围有误。

技巧：

用dw打开菜单背景图，在图案上面直接绘制热点，然后把代码复制出来就ok。

三：上代码

用到的素材：