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

CSS3菜单动画

最新推荐文章于 2024-10-20 22:38:54 发布

weixin_34112030

最新推荐文章于 2024-10-20 22:38:54 发布

阅读量86

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jasonzeng/p/4624781.html

本文介绍了一个使用纯CSS3实现的类似QQ空间的菜单效果。该菜单通过简单的动画实现了展开和收起的功能，无需使用JavaScript。文章提供了完整的代码示例。

工作之余写的一个类似于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>