為何沒法正常顯示
@mixin toolbar-item($pos,$hoverPos){
background-position:0 $pos;
&:hover{
background-position:0 $hoverPos;
}
}
$toolbar-size:52px;
.toolbar-item,.toolbar-layer{
background-image:url(../img/toolbar.png);
background-repeat:no-repeat;
}
.toolbar{
position:fixed;
left:50px;
bottom:5px;
margin-left:-$toolbar-size / 2;
}
.toolbar-item{
position:relative;
display:block;
width:$toolbar-size;
height:$toolbar-size;
margin-top:1px;
transition:background-position 1s;
&:hover{
.toolbar-layer{
opacity:1;
filter:alpha(opacity=100);
transform:scale(1);
}
}
}
.toolbar-item-weixin{
@include toolbar-item(-798px,-860px);
.toolbar-layer{
height:212px;
background-position:0 0;
}
}
.toolbar-item-feedback{
@include toolbar-item(-426px,-488px);
}
.toolbar-item-app{
@include toolbar-item(-550px,-612px);
.toolbar-layer{
height:194px;
background-position:0 -222px;
}
}
.toolbar-item-top{
@include toolbar-item(-674px,-736px);
}
.toolbar-layer{
position:absolute;
right:$toolbar-size - 6;
bottom:-10;
width:172px;
opacity:0;
filter:alpha(opacity=0);
transform-origin:95% 95%;
transform:scale(0.01);
transition:all 1s;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>側欄工具</title>
<link rel="stylesheet" href="css/index.css" ?/>
</head>
<body>
<div>
<a href="javascript:;" class="toolbar-item toolbar-itemp-weixin">
<span></span>
</a>
<a href="javascript:;" class="toolbar-item toolbar-itemp-feedback"></a>
<a href="javascript:;" class="toolbar-item toolbar-itemp-app">
<span></span>
</a>
<a href="javascript:;" class="toolbar-item toolbar-itemp-top"></a>
</div>
</body>
</html>
2016-11-11
我之前也遇到了，是因為index.html中的類名寫錯了一個單詞，但是后來的二維碼部分始終顯示不出來
2016-05-03
從顯示上來說應該是background-position的位置調整出現錯誤，你可以先單獨設置看看先實現過，先不要用
@mixin toolbar-item($pos,$hoverPos){
background-position:0 $pos;
&:hover{
background-position:0 $hoverPos;
}
}
吧它封裝出來