Achieve sidebar tool (1) using a background image mode

Need to develop similar CSDN article appears to the right of the browser toolbar, as shown below

The need to achieve results is as follows:

1 HTML format

The main principles of the use of a label and image sprite to achieve
create a toolbar div class toolbat
Click a tag does not have any effect

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

Complete code, public class toolbar-item is used to set the same width and height, the first pop-up two-dimensional code app downloaded when the mouse hover, comprising a label in a span label, to place the two-dimensional code

<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 CSS styles

Here sass style using precompiled tools to write css style, sass specific use of another article already said, referring to Sass and Compass Study Notes (1)
The following describes the in scss write file
public variable settings, the size of the toolbar

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

External unified toolbar toolbar class set

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

a tag common style toolbar-item setting

/* 公共样式设置 */
.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);
        }
    }

}

Internal tag defines the style

.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;
    }
}

The initial two-dimensional code style settings

.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;
}

3 Performance Optimization

• May toolbar-item and toolbar-layer like parts class singled

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

• Within a single column toolbar similar same code
  

New unified external module can mixin

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

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

Function call

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

transition belongs css3 attribute, consider the compatibility of the different browsers, to the same transition encapsulation.
New mixin

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

.toolbar-item in a function call

 @include transition(background-position 1s);

Also other CSS3 properties also need to consider the case.

This article is reproduced in: Ape 2048 to achieve sidebar tool (1) using a background image mode