![750d8fb0038c473ed0d3bbe946f5cf71.gif](https://img-blog.csdnimg.cn/img_convert/750d8fb0038c473ed0d3bbe946f5cf71.gif)
天道好轮回 苍天绕过谁
拖更不是我的一厢情愿,浏览量哗哗下掉,于是我又回来了
希望有一天大家都能在借鉴中创新
看一下今天实现的效果:
![a257bcd5289e917d3847b5b8cea505d3.gif](https://img-blog.csdnimg.cn/img_convert/a257bcd5289e917d3847b5b8cea505d3.gif)
静态代码分为两部分:静态状态|点击被召唤的
因此构建静态代码:
<div class="container">
<div class="wrapper">
<div class="item-simple">首页</div>
<div class="item-simple">进吧</div>
<div class="item-simple">
<div id="menu" class="menu" onclick="addAction()"><span class="add_menu">+</span></div>
</div>
<div class="item-simple">消息</div>
<div class="item-simple">我的</div>
</div>
</div>
![6c53bbe32a61c7befa3494a3a937df15.png](https://img-blog.csdnimg.cn/img_convert/6c53bbe32a61c7befa3494a3a937df15.png)
div分割五部分,其中的中间部分用于做特殊的点击中心按钮。实现效果需要:
加背景-》放大+-》旋转+-》上浮位置-》阴影(为了立体效果)