• 侧栏工具栏


    <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);
  • 相关阅读:
    leetcode 3sum
    leetcode majority elements
    php调取linux的压缩命令进行压缩
    mysql 分区、分表、分库分表。
    如何在数据库中使用索引
    PDO 的基本操作
    JavaScript中常见的字符串操作函数及用法汇总
    php-fpm
    phpmyadmin导入导出数据库文件最大限制的解决方法
    php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳。
  • 原文地址:https://www.cnblogs.com/bhan/p/5470786.html
Copyright © 2020-2023  润新知