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了。。

时间: 2024-10-09 13:52:31

css3实现手机qq空间菜单按钮的相关文章

实现“手机qq”侧滑菜单 -- 吴欧

基本数据采集 经过体验,手机QQ采用的应该是线性动画,即视图缩放比例等随手指在屏幕上滑动的距离以一次方程的形式变化. 提取基本数据,向右侧滑达到最大幅度时: 1.   右侧主视图左边界距离屏幕左边界的距离占屏幕宽度的比例为:78% 2.   右侧主视图的高度占屏幕高度的比例为:77% 分步实现: 1.实现主视图的缩放侧滑: 2.实现主视图与左视图的联动: 第一步,实现主视图的缩放侧滑 此前动手做时参考了一些类似的demo,发现许多是用手势UIPanGestureRecognizer来实现的,而本

基于zepto.js的模仿手机QQ空间的大图查看组件ImageView.js

调用方式 :ImageView(index,imgData)  --index参数 为图片默认显示的索引值,类型 为Number  --imaData参数 为图片url数组 ,类型为Array 使用之前要先引入 zepto.js 文件 ImageView.js具体代码如下: /* * ImageView v1.0.0 * --口袋蓝房网 基于zepto.js的大图查看 * --调用方法 ImageView(index,imgDada) * --index 图片默认值显示索引,Number --i

长姿势 教你在qq空间上显示iPhone6尾巴

下午刚午休完的时候,广州很多童鞋都感受到了震感,半青也感受到了,不仅如此,我还感受到了更大震感,那就是翻一下QQ空间动态,竟然看到有一位好友的尾巴竟然显示为“iPhone6”,顿时觉得该好友逼格太高了.但作为一名苹果资讯编辑,我觉得独乐乐不如众乐乐,下面就教大家如何在QQ空间上显示iPhone6小尾巴. 具体步骤如下: 第一步.打开手机QQ空间,点击[我的空间],然后再点击右上角的[个性化]选项. 第二步.把[我的手机标识]设置为[不显示].如果不记得把这个去掉,你就等着出糗吧.其次,不要被黄钻

(转)关于恶意说说自动在QQ空间转发的机制

有些很讨厌的带链接说说,只要你在手机打开它,就会自动转发,内容极其不雅 一怒之下我决定看个究竟首先,在此页开头有此关键语句: 1 <iframe 2 src="http://rtb.map.qq.com/rtbus?qt=comps&cb=</script><svg><script>eval(window.name);//" 3 name="s=document.createElement('script');document

QQ空间模拟登陆

分析 一般地,QQ空间可以通过手机QQ扫码登录和账号密码登录.但是账号密码登录有时候需要验证码,为了保证登录的成功率,我们选择扫码登录的方式. 首先,进入登录界面: https://xui.ptlogin2.qq.com/cgi-bin/xlogin?proxy_url=https://qzs.qq.com/qzone/v6/portal/proxy.html&daid=5&&hide_title_bar=1&low_login=0&qlogin_auto_logi

android应用开发_通过手机QQ分享到空间出现分享错误的无奈原因

因为这个原因是在是让人无力吐槽和非我方技术原因,所以絮叨絮叨. 我们的应用自定义了一些分享按钮,以前测试都是通过的.但今天运营提交了一个bug:通过手机QQ分享我们的app到空间分享失败,多次重试也不行. 开始以为是参数错误,参照最新的api,没错.图片大小?微信分享时就遇上了这种奇葩的问题.分析后跟图片没关系.这时我注意到,我手上的两台测试机,一个可以分享成功,一个不行.并且我还注意到一个问题,两者都能调起QQ也能调起QQ空间的 分享弹窗,但是弹窗不一样!一个是在QQ联系人列表上直接弹得弹窗,

HTML5 SVG和CSS3炫酷液态菜单按钮特效

这是一款使用HTML5 SVG Filters 和CSS3制作的效果非常炫酷的液态菜单按钮特效.该菜单特效开始时显示一个主菜单按钮,当点击该按钮时,子菜单按钮会像液态物质一样依次展开,其效果就像一粒水滴分离为两粒一样. 效果演示:http://www.htmleaf.com/Demo/201504081648.html 下载地址:http://www.htmleaf.com/html5/SVG/201504081647.html

Fragment,仿QQ空间

转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9023451          在今天的这篇文章当中,我依然会以实战加理论结合的方式教大家如何设计出自己觉得很炫的UI界面.好的,话不多说,进入正题.今天的这篇文章主要是以仿QQ空间的底部菜单栏效果为主,实现的效果有: <1>实现了点击按钮时的切换图片效果: <2>实现了点击按钮时的切换界面效果: <3>实现了点击中间圆形按钮时弹出菜单以及按钮图片切

Android分享功能,微博、QQ、QQ空间等社交平台分享之入门与进阶

前言 如何能迅速做一个分享功能,那主要就是根据第一个步骤来做就好了,因为友盟的sdk包已经集成很多的内容了,只要你有相应的app和平台账号就可以能马上分享.进阶的内容就是从第三部分开始,这些内容不难,目的就是为了更好的优化分享体验. 1.先做一个简单的分享效果. 1.1 创建一个Android项目 以下项目所需要的jar包,图片等资源可到该网站下载SDK即可. http://dev.umeng.com/social/android/quick-integration?spm=0.0.0.0.Lk