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:0;

 padding:0;

 border:0;

 list-style:none;

 }

 html, body, #container

        {

            width:100%;

            height:100%;

            overflow:hidden;

        }

#container

        {

            background:#259766;

              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:0;

            left:50%;

            margin-left:-25px;



        }

.st-icon

        {

            text-align:center;

            font-size:50px;

           line-height:50px;

           -webkit-border-radius:50%;

           border-radius:50%;

           background-color:#F90;

           color:white;

           -webkit-transition:all 1s ease-in-out;

           transition:all .7s ease-in-out;

            z-index:999;

        }

.nav

        {

            z-index:9999;

            opacity: 0;

            filter: 'alpha(opacity=50)';

           cursor:pointer;

        }

.nav:checked + .st-icon

        {

            -webkit-transform:rotateZ(135deg);

            transform:rotateZ(135deg);

        }

.cover

        {

          

           background:rgba(255,255,255,.7);

           position:absolute;

           width:100%;

           height:100%;

           bottom:-100%;

           left:0;

           -webkit-transition:all 1.5s ease-in-out;

           transition:all .6s ease-in-out;

        }

.nav:checked ~ .cover

        {

           bottom:0;

        }



.ope-group

        {

            position:absolute;

            bottom:100px;

            left:0;

            right:0;

            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 0.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 0.2s backwards;

             animation:moveUp .3s ease-in-out .2s backwards;

        }

.nav:checked ~ .cover li#opeItem3

        {

             -webkit-animation:moveUp .3s ease-in-out 0.3s backwards;

             animation:moveUp .3s ease-in-out .3s backwards;

        }

.nav:checked ~ .cover li#opeItem4

        {

             -webkit-animation:moveUp .3s ease-in-out 0.4s backwards;

             animation:moveUp .3s ease-in-out .4s backwards;

        }

.nav:checked ~ .cover li#opeItem5

        {

             -webkit-animation:moveUp .3s ease-in-out 0.5s backwards;

             animation:moveUp .3s ease-in-out .5s backwards;

        }

.nav:checked ~ .cover li#opeItem6

        {

              -webkit-animation:moveUp .3s ease-in-out 0.5s backwards;

             animation:moveUp .3s ease-in-out .5s backwards;

        }

@-webkit-keyframes moveUp

        {

            0%

            {

                -webkit-transform:translateY(200px);

                -moz-opacity: 0;

        opacity: 0;

            }

            100%

            {

                 -webkit-transform:translateY(0px);

                 -moz-opacity: 1;

                opacity: 1;

            }

        }

@keyframes moveUp

        {

            0%

            {

                transform:translateY(-200px);

                -moz-opacity: 0;

        opacity: 0;

            }

            100%

            {

                transform:translateY(0px);

                -moz-opacity: 1;

        opacity: 1;

            }

        }

        @-webkit-keyframes moveDown

        {

            100%

            {

                -webkit-transform:translateY(200px);

                -moz-opacity: 0;

        opacity: 0;

            }

            0%

            {

                 -webkit-transform:translateY(0px);

                 -moz-opacity: 1;

                opacity: 1;

            }

        }

@keyframes moveDown

        {

            100%

            {

                transform:translateY(-200px);

                -moz-opacity: 0;

        opacity: 0;

            }

            0%

            {

                transform:translateY(0px);

                -moz-opacity: 1;

        opacity: 1;

            }

        }



.st-list

        {

            width:300px;

            background:#FFF;

            margin-left:auto;

            margin-right:auto;

            margin-bottom:20px;

            padding:5px;

            

        }

.st-list .st-avatar

            {

               -webkit-border-radius:50%;

               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="2"></div>

        <div class="cover">

            <ul class="ope-group">

                <li id="opeItem1"><img src="images/参数管理.png"  /><br/><span class="ope-name">参数管理</span></li>

                <li id="opeItem2"><img src="images/订单申请.png" /><br/><span class="ope-name">订单申请</span></li>

                <li id="opeItem3"><img src="images/订单审核.png" /><br/><span class="ope-name">订单审核</span></li>

                <li id="opeItem4"><img src="images/经销商库存查询.png" /><br/><span class="ope-name">库存查询</span></li>

                <li id="opeItem5"><img src="images/收货入库.png" /><br/><span class="ope-name">收货入库</span></li>

                <li id="opeItem6"><img src="images/角色权限管理.png" /><br/><span class="ope-name">权限管理</span></li>

            </ul>

        </div>

    </div>

</body>

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