• 侧栏工具栏


    <div class="toolbar">
        <a href="javascript:;" class="toolbar-item toolbar-item-weixin">
            <span class="toolbar-layer"></span>
        </a>
        <a href="javascript:;" class="toolbar-item toolbar-item-feedback"></a>
        <a href="javascript:;" class="toolbar-item toolbar-item-app">
            <span class="toolbar-layer"></span>
        </a>
        <a href="javascript:;" class="toolbar-item toolbar-item-top"></a>
    </div>
    

     

     1 .toolbar-item,.toolbar-layer{
     2     background-image: url("images/toolbar.png");
     3     background-repeat: no-repeat;
     4 }
     5 .toolbar{
     6     position: fixed;left: 50%;bottom: 5px;margin-left: -26px;
     7 }
     8 .toolbar-item{
     9     display: block;width: 52px;;height: 52px;
    10     margin-top: 1px;position: relative;transition: background-position 1s;
    11 }
    12 .toolbar-item:hover .toolbar-layer{opacity: 1;filter: alpha(opacity=100);transform: scale(1)}
    13 .toolbar-item-weixin{background-position: 0 -798px}
    14 .toolbar-item-weixin:hover{background-position: 0 -860px}
    15 .toolbar-item-weixin .toolbar-layer{height: 212px;background-position: 0 0}
    16 .toolbar-item-feedback{background-position: 0 -426px}
    17 .toolbar-item-feedback:hover{background-position: 0 -488px}
    18 .toolbar-item-app{background-position: 0 -550px}
    19 .toolbar-item-app:hover{background-position: 0 -612px}
    20 .toolbar-item-app .toolbar-layer{height: 194px;background-position:0 -222px}
    21 .toolbar-item-top{background-position: 0 -674px}
    22 .toolbar-item-top:hover{background-position: 0 -736px}
    23 
    24 .toolbar-layer{
    25     position: absolute;
    26     right: 52px;
    27     bottom: -6px;
    28     width: 172px;
    29     background-image: url("images/toolbar.png");
    30     background-repeat: no-repeat;
    31     opacity: 0;
    32     filter: alpha(opacity=0);
    33     transform-origin: 95% 95%;
    34     transform: scale(0.01);
    35     transition: all 1s;
    36 }
     1 .toolbar-item,.toolbar-layer{
     2     background-image: url("images/toolbar.png");
     3     background-repeat: no-repeat;
     4 }
     5 .toolbar{
     6     position: fixed;left: 50%;bottom: 5px;margin-left: -26px;
     7 }
     8 .toolbar-item{
     9     display: block;width: 52px;;height: 52px;
    10     margin-top: 1px;position: relative;transition: background-position 1s;
    11 }
    12 .toolbar-item:hover .toolbar-layer{opacity: 1;filter: alpha(opacity=100);transform: scale(1)}
    13 .toolbar-item-weixin{background-position: 0 -798px}
    14 .toolbar-item-weixin:hover{background-position: 0 -860px}
    15 .toolbar-item-weixin .toolbar-layer{height: 212px;background-position: 0 0}
    16 .toolbar-item-feedback{background-position: 0 -426px}
    17 .toolbar-item-feedback:hover{background-position: 0 -488px}
    18 .toolbar-item-app{background-position: 0 -550px}
    19 .toolbar-item-app:hover{background-position: 0 -612px}
    20 .toolbar-item-app .toolbar-layer{height: 194px;background-position:0 -222px}
    21 .toolbar-item-top{background-position: 0 -674px}
    22 .toolbar-item-top:hover{background-position: 0 -736px}
    23 
    24 .toolbar-layer{
    25     position: absolute;
    26     right: 52px;
    27     bottom: -6px;
    28     width: 172px;
    29     background-image: url("images/toolbar.png");
    30     background-repeat: no-repeat;
    31     opacity: 0;
    32     filter: alpha(opacity=0);
    33     transform-origin: 95% 95%;
    34     transform: scale(0.01);
    35     transition: all 1s;
    36 }
    设置透明度:opacity: 0;
    兼容ie方式filter: alpha(opacity=0);
    设置起始点:transform-origin: 95% 95%;
    缩放动画:transform: scale(0.01);
  • 相关阅读:
    web策略类游戏开发(五)数据库表设计
    web策略类游戏开发(一) WebGame架构篇
    SQL Server2005之初体验!
    SQL SERVER2005关于如何找到表的说明。
    脚本实现CheckBox父选中,子全选中,子选中父也选中!
    今天看到人家系统中有此效果,不知道是怎么实现的。
    忆风伶夜雨
    GridView双击某行弹出一新窗口!
    DIV位置永恒居中。
    关于:装了Visual.SourceSafe.2005之后,打开VS2005文件,找不到源代码管理这项的问题
  • 原文地址:https://www.cnblogs.com/bhan/p/5470786.html
Copyright © 2020-2023  润新知