为何没法正常显示
wo_yao_song
2016-04-19 21:21
@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>
2回答
-
- qq_小盛同学拒绝不了_03127943
- 2016-11-11 17:32:01
我之前也遇到了，是因为index.html中的类名写错了一个单词，但是后来的二维码部分始终显示不出来
-
- qq_指月指_0
- 2016-05-03 16:53:00
从显示上来说应该是background-position的位置调整出现错误，你可以先单独设置看看先实现过，先不要用
@mixin toolbar-item($pos,$hoverPos){
background-position:0 $pos;
&:hover{
background-position:0 $hoverPos;
}
}
吧它封装出来
侧栏工具条开发
68226 学习 · 289 问题
相似问题