css3实现手机qq空间菜单按钮

工作之余写的一个类似于QQzone的菜单效果

先上截图：

图一为点击按钮前界面：

图二为点击按钮后的界面

下面上代码：

<!--css部分-->
<style type="text/css">
@font-face
{
    font-family:'Raphaelicons';
    src:url(font/raphaelicons-webfont.svg) format('svg'),url(font/raphaelicons-webfont.woff) format('woff');
    font-weight:normal;
}
*
{margin:;
 padding:;
 border:;
 list-style:none;
 }
 html, body, #container
        {
            width:%;
            height:%;
            overflow:hidden;
        }
#container
        {
            background:#;
              overflow-y:auto;
        }

[data-icon]:after
        {
            font-family:Raphaelicons;
            content:attr(data-icon);
            width:50px;
            height:50px;
        }

.st-icon, .nav
        {
            position:absolute;
            width:50px;
            height:50px;
            bottom:;
            left:%;
            margin-left:-25px;

        }
.st-icon
        {
            text-align:center;
            font-size:50px;
           line-height:50px;
           -webkit-border-radius:%;
           border-radius:%;
           background-color:#F90;
           color:white;
           -webkit-transition:all 1s ease-in-out;
           transition:all .7s ease-in-out;
            z-index:;
        }
.nav
        {
            z-index:;
            opacity: ;
            filter: 'alpha(opacity=50)';
           cursor:pointer;
        }
.nav:checked + .st-icon
        {
            -webkit-transform:rotateZ(135deg);
            transform:rotateZ(135deg);
        }
.cover
        {

           background:rgba(,,,.);
           position:absolute;
           width:%;
           height:%;
           bottom:-%;
           left:;
           -webkit-transition:all .5s ease-in-out;
           transition:all .6s ease-in-out;
        }
.nav:checked ~ .cover
        {
           bottom:;
        }

.ope-group
        {
            position:absolute;
            bottom:100px;
            left:;
            right:;
            padding-left:20px;

        }
.ope-group li
            {
              float:left;
              margin-right:20px;
              text-align:center;
              margin-bottom:10px;
            }
.ope-name
        {
            font-size:7px;
        }

.nav:checked ~ .cover li#opeItem1
        {
             -webkit-animation:moveUp .3s ease-in-out .1s backwards;
             animation:moveUp .3s ease-in-out .1s backwards;
        }
.nav ~ .cover li#opeItem1, .nav ~ .cover li#opeItem2, .nav ~ .cover li#opeItem3, .nav ~ .cover li#opeItem4
        {
            -webkit-animation:moveDown .2s ease-out .2s backwards;
             animation:moveDown .2s ease-out .2s backwards;
        }
.nav ~ .cover li#opeItem5, .nav ~ .cover li#opeItem6
        {

              -webkit-animation:moveDown .2s ease-out .1s backwards;
             animation:moveDown .2s ease-out .1s backwards;
        }
.nav:checked ~ .cover li#opeItem2
        {
             -webkit-animation:moveUp .3s ease-in-out .2s backwards;
             animation:moveUp .3s ease-in-out .2s backwards;
        }
.nav:checked ~ .cover li#opeItem3
        {
             -webkit-animation:moveUp .3s ease-in-out .3s backwards;
             animation:moveUp .3s ease-in-out .3s backwards;
        }
.nav:checked ~ .cover li#opeItem4
        {
             -webkit-animation:moveUp .3s ease-in-out .4s backwards;
             animation:moveUp .3s ease-in-out .4s backwards;
        }
.nav:checked ~ .cover li#opeItem5
        {
             -webkit-animation:moveUp .3s ease-in-out .5s backwards;
             animation:moveUp .3s ease-in-out .5s backwards;
        }
.nav:checked ~ .cover li#opeItem6
        {
              -webkit-animation:moveUp .3s ease-in-out .5s backwards;
             animation:moveUp .3s ease-in-out .5s backwards;
        }
@-webkit-keyframes moveUp
        {
            %
            {
                -webkit-transform:translateY(200px);
                -moz-opacity: ;
        opacity: ;
            }
            %
            {
                 -webkit-transform:translateY(0px);
                 -moz-opacity: ;
                opacity: ;
            }
        }
@keyframes moveUp
        {
            %
            {
                transform:translateY(-200px);
                -moz-opacity: ;
        opacity: ;
            }
            %
            {
                transform:translateY(0px);
                -moz-opacity: ;
        opacity: ;
            }
        }
        @-webkit-keyframes moveDown
        {
            %
            {
                -webkit-transform:translateY(200px);
                -moz-opacity: ;
        opacity: ;
            }
            %
            {
                 -webkit-transform:translateY(0px);
                 -moz-opacity: ;
                opacity: ;
            }
        }
@keyframes moveDown
        {
            %
            {
                transform:translateY(-200px);
                -moz-opacity: ;
        opacity: ;
            }
            %
            {
                transform:translateY(0px);
                -moz-opacity: ;
        opacity: ;
            }
        }

.st-list
        {
            width:300px;
            background:#FFF;
            margin-left:auto;
            margin-right:auto;
            margin-bottom:20px;
            padding:5px;

        }
.st-list .st-avatar
            {
               -webkit-border-radius:%;
               float:left;
               padding:5px;
               box-shadow:2px 2px 10px;
               width:50px;
            }
.st-list .st-detail
            {
                margin-left:100px;
            }

.st-list
        {
            box-shadow:1px 1px 1px;
        }

    </style>
<!--html部分-->
<body onmousewheel="return false;">
    <div id="container">
        <div class="st-list">
            <img  class="st-avatar" src="http://pic.cnblogs.com/avatar/595478/20140712113054.png"/>
            <div class="st-detail">
                <h3>工作标题</h3>
                <p class="st-content">今天的工作内容今天的工作内容今天的工作内容今天的工作内容</p>
            </div>
        </div>
        <div class="st-list">
            <img  class="st-avatar" src="http://pic.cnblogs.com/avatar/595478/20140712113054.png"/>
            <div class="st-detail">
                <h3>工作标题</h3>
                <p class="st-content">今天的工作内容今天的工作内容今天的工作内容今天的工作内容</p>
            </div>
        </div>
        <div class="st-list">
            <img  class="st-avatar" src="http://pic.cnblogs.com/avatar/595478/20140712113054.png"/>
            <div class="st-detail">
                <h3>工作标题</h3>
                <p class="st-content">今天的工作内容今天的工作内容今天的工作内容今天的工作内容</p>
            </div>
        </div>
        <div class="st-list">
            <img  class="st-avatar" src="http://pic.cnblogs.com/avatar/595478/20140712113054.png"/>
            <div class="st-detail">
                <h3>工作标题</h3>
                <p class="st-content">今天的工作内容今天的工作内容今天的工作内容今天的工作内容</p>
            </div>
        </div>

        <input class="nav" type="checkbox"/>
        <div class="st-icon" data-icon=""></div>
        <div class="cover">
            <ul class="ope-group">
                <li id="opeItem1"><img src="data:images/参数管理.png"  /><br/><span class="ope-name">参数管理</span></li>
                <li id="opeItem2"><img src="data:images/订单申请.png" /><br/><span class="ope-name">订单申请</span></li>
                <li id="opeItem3"><img src="data:images/订单审核.png" /><br/><span class="ope-name">订单审核</span></li>
                <li id="opeItem4"><img src="data:images/经销商库存查询.png" /><br/><span class="ope-name">库存查询</span></li>
                <li id="opeItem5"><img src="data:images/收货入库.png" /><br/><span class="ope-name">收货入库</span></li>
                <li id="opeItem6"><img src="data:images/角色权限管理.png" /><br/><span class="ope-name">权限管理</span></li>
            </ul>
        </div>
    </div>
</body>

ps：由于本人并非美工出生，所以界面效果也只是简单的实现了一下效果，上面基本上是所有的代码，并未用到任何js代码，既然是css3低版本的浏览器肯定就down了。。 项目在github上面 https://github.com/wdxlwx/qqzonemenu