Lograr la herramienta de la barra lateral (1) utilizando un modo de imagen de fondo

Necesidad de desarrollar figura el artículo CSDN similares a la derecha de la barra de herramientas del navegador, como se muestra a continuación

La necesidad de lograr resultados es el siguiente:

1 formato HTML

Los principios fundamentales de la utilización de una etiqueta y la imagen de sprite para lograr
crear una clase de barra de herramientas div toolbat
Haga clic en una etiqueta no tiene ningún efecto

<div class="toolbar">
    a[href="javascript:;"].toolbar-item.toolbat-item-app*4
</div>

código completo, public class barra de herramientas-elemento se utiliza para establecer la misma anchura y altura, la primera aplicación de código bidimensional emergente de descarga cuando el cursor del ratón, que comprende una etiqueta en un lapso de etiqueta, para colocar el código bidimensional

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

2 estilos CSS

Aquí estilo Sass utilizando herramientas precompilados de estilo CSS escritura, uso específico Sass de otro artículo ya se dijo, en referencia a Sass y Compass Notas de Estudio (1)
A continuación se describen los en SCSS archivo de escritura
ajustes variables pública, el tamaño de la barra de herramientas

/* 参数变量设置 */
$toolbar-width: 90px;
$toolbar-height: 28px; 

barra de herramientas unificado externa barra de herramientas conjunto de clases

.toolbar{
    position: fixed;//工具条固定定位
    right: 10%;
    top: 50%;
}

un estilo común etiqueta de ítems barra de herramientas de configuración

/* 公共样式设置 */
.toolbar-item{
    position: relative;
    display: block;
    width: $toolbar-width;
    height: $toolbar-height;
    background-image: url(../img/com-toolbar.png);
    background-repeat: no-repeat;
    margin-top: 10px;
    z-index: 1000;
    transition: background-position 1s;
    /*鼠标hover时a标签下面的toolbar-layer二维码显示，透明度为1，兼容ie6,缩放大小为1*/
    &:hover{
        .toolbar-layer{
            opacity: 1;
            filter: alpha(opacity=100);
            transform: scale(1);
        }
    }

}

variable interna define el estilo

.toolbar-item-app{
    background-position: 0 0;
    &:hover{
        background-position: -100px 0;
    }
    
    .toolbar-layer{
        height: 112px;
        background-position: 0 -198px;
    }
}

.toolbar-item-feedback{
    background-position: 0 -33px;
    &:hover{
        background-position: -100px -33px;
    }
}
.toolbar-item-other{
    background-position: 0 -66px;
    &:hover{
        background-position: -100px -66px;
    }

    .toolbar-layer{
        height: 112px;
        background-position: 0 -198px;
    }
}
.toolbar-item-top{
    background-position: 0 -165px;
    &:hover{
        background-position: -100px -165px;
    }
}

La configuración inicial de dos dimensiones de código de estilo

.toolbar-layer{
    cursor: pointer;
    position: absolute;//相对于工具条绝对定位
    right: $toolbar-width;
    bottom:-1px;
    width: 90px;
    background-image: url(../img/com-toolbar.png);
    background-repeat: no-repeat;
    opacity: 0;//开始透明度为0
    filter: alpha(opacity=0);
    transform: scale(0.01);//初始大小为0.01，不可见
    z-index: 1000;
    transform-origin: right bottom;//从底部和右侧开始缩放
    transition: all 1s;
}

Optimización del rendimiento 3

• Puede barra de herramientas del tema y barra de herramientas de capas como la clase de piezas sencillo

.toolbar-item, .toolbar-layer{
    background-image: url(../img/com-toolbar.png);
    background-repeat: no-repeat;    
}

• Dentro de una sola columna de la barra de herramientas mismo código similar
  

Nuevo módulo externo unificado puede mixin

@mixin toolbar-item($x, $y, $hoverx, $hovery){
    background-position: $x $y;

    &:hover{
        background-position: $hoverx $hovery;
    }
}

llamada a la función

@include toolbar-item(0, 0, -100px, 0);

transición pertenece atributos CSS3, tenga en cuenta la compatibilidad de los diferentes navegadores, a la misma transición encapsulación.
nueva mixin

@mixin transition($transition){
    -webkit-transition: $transition;
    -moz-transition: $transition;
    -ms-transition: $transition;
    -o-transition: $transition;
    transition: $transition;
}

.toolbar ítems en una llamada de función

 @include transition(background-position 1s);

También otras propiedades CSS3 también deben considerar el caso.

Este artículo se reproduce en: Ape 2048 para lograr la herramienta de la barra lateral (1) utilizando un modo de imagen de fondo