實現(xiàn)側(cè)邊欄工具（2）使用圖標(biāo)字體方式

Yangder 發(fā)布于2019-08-01 15:07 / 2469人閱讀

摘要：前面講了一下使用背景圖片來實現(xiàn)側(cè)邊工具欄的一個實現(xiàn)效果，實現(xiàn)側(cè)邊欄工具使用背景圖片方式，可以看出這種方式的優(yōu)缺點是結(jié)構(gòu)簡單，容易閱讀和理解使用圖片瀏覽器兼容性好，可以兼容等低版本瀏覽器缺點就是使用了大量的圖片，對性能有一定的影響，并且不利于

前面講了一下使用背景圖片來實現(xiàn)側(cè)邊工具欄的一個實現(xiàn)效果，實現(xiàn)側(cè)邊欄工具（1）使用背景圖片方式，可以看出這種方式的優(yōu)缺點是

HTML結(jié)構(gòu)簡單，容易閱讀和理解

使用圖片瀏覽器兼容性好，可以兼容ie6等低版本瀏覽器

缺點就是使用了大量的圖片，對性能有一定的影響，并且不利于修改。

下面介紹一種使用圖標(biāo)字體來實現(xiàn)側(cè)邊欄工具條

HTML結(jié)構(gòu)

html結(jié)構(gòu)外層寫一個toolbar類div
每一個內(nèi)部工具條寫一個a標(biāo)簽，內(nèi)部包含兩個span，一個span用來包含圖標(biāo)字體和具體的文字，另一個span用來包含二維碼，如果不需要顯示二維碼，則只需一個span

CSS樣式

首先需要去網(wǎng)上下載所需的字體圖標(biāo)樣式，這類網(wǎng)站有很多，這里使用https://icomoon.io/app/#/select/font
網(wǎng)站具體界面如下

在selection中查看所選擇的字體圖標(biāo)，選好之后，Generate Font
打包下載選擇的字體圖標(biāo)

解壓縮，查看文件目錄結(jié)構(gòu)，將其中的fonts文件夾和style.css樣式文件復(fù)制到css文件夾下面

打開style.css，將里面的內(nèi)容復(fù)制到自己的SCSS文件中

將其中的字體圖標(biāo)類復(fù)制到上面的html結(jié)構(gòu)中

外部工具條總體樣式固定定位

.toolbar{
    position: fixed;
    right: 10%;
    top: 50%;    
}

a標(biāo)簽樣式

.toolbar-item{
    position: relative;
    display: block;
    width: $toolbar-width;
    height: $toolbar-height;
    margin-top: 10px;
    z-index: 1000;
//a標(biāo)簽hover時產(chǎn)生的效果
    &:hover{
        .toolbar-icon{
            top: -$toolbar-height;
        }
        .toolbar-text{
            top: 0;
        }
        .toolbar-layer{
            opacity: 1;
            filter: alpha(opacity=100);
            transform: scale(1);
        }
    }

}

a標(biāo)簽的子元素，相對于a標(biāo)簽絕對定位，用來包含圖標(biāo)字體和文本字體，設(shè)置溢出隱藏

.tooblar-btn{
    position: absolute;
    left: 0;
    top: 0;
    width: $toolbar-width;
    height: $toolbar-height;
    overflow: hidden;
}

圖標(biāo)字體樣式

.toolbar-icon{
    position: absolute;
    left: 0;
    top: 0;
    width: $toolbar-width;
    height: $toolbar-height;
    background-color: #6F6F6F;
    font-size: 24px;
    color: #fff;
    text-align: center;
    line-height: $toolbar-height;
    @include transition(top 0.5s);
}

文本字體樣式

.toolbar-text{
    position: absolute;
    left: 0;
    top: $toolbar-height;
    width: $toolbar-width;
    height: $toolbar-height;
    background-color: #BE0201;
    padding-top: 8px;
    font-size: 14px;
    font-family: "微軟雅黑";
    color: #fff;
    text-align: center;
    line-height: 1.2;
    @include transition(top 0.5s);

}

二維碼公共部分設(shè)置

.toolbar-layer{
    cursor: pointer;
    position: absolute;
    right: $toolbar-width;
    bottom: -1px;
    width: 90px;
    background-image: url(../img/com-toolbar.png);
    background-repeat: no-repeat;
    transform: scale(0.01);
    z-index: 1000;
    transform-origin: right bottom;
    transition: all 1s;
    opacity: 0;
    filter: alpha(opacity=0);

}

.toolbar-layer-app{
    height: 112px;
    background-position: 0 -198px; 
}
.toolbar-layer-channel{
    height: 112px;
    background-position: 0 -198px
}