老师求代码
.d{
css代码
position: fixed;
left: 50%;
bottom: 5px;
display: block;
}
.a{
background-position: 0 -798px;
}
.toolbar-weixin{
margin-top: 1px;
transition: 1s;
display: block;
width: 52px;
height: 52px;
background-image: url(toolbar.png);
}
.toolbar-weixin:hover{
margin-top: 1px;
transition: 1s;
display: block;
width: 52px;
height: 52px;
background-image: url(toolbar.png);
background-repeat: no-repeat;
background-position: 0 -860px;
}
.toolbar-layer1{
position: absolute;
left: 0px;
bottom: 160px;
width: 52px;
height: 52px;
opacity: 0;
background-image: url(toolbar.png);
background-repeat: no-repeat;
background-position: 0 0;
transform-origin: 95% 95%;
transition:1s;
}
.toolbar-weixin:hover .toolbar-layer1{
position: absolute;
left: -172px;
bottom: 155px;
width: 172px;
height: 212px;
opacity: 1;
background-image: url(toolbar.png);
background-repeat: no-repeat;
background-position: 0 0;
transform-origin: 95% 95%;
transition:1s;
}
.toolbar-feedback{
margin-top: 1px;
transition: 1s;
display: block;
width: 52px;
height: 52px;
background-image: url(toolbar.png);
background-repeat: no-repeat;
background-position: 0 -426px;
}
.toolbar-feedback:hover{
margin-top: 1px;
transition: 1s;
display: block;
width: 52px;
height: 52px;
background-image: url(toolbar.png);
background-repeat: no-repeat;
background-position: 0 -488px;
}
.toolbar-app{
margin-top: 1px;
transition: 1s;
display: block;
width: 52px;
height: 52px;
background-image: url(toolbar.png);
background-repeat: no-repeat;
background-position: 0 -550px;
}
.toolbar-app:hover{
margin-top: 1px;
transition: 1s;
display: block;
width: 52px;
height: 52px;
background-image: url(toolbar.png);
background-repeat: no-repeat;
background-position: 0 -612px;
}
.toolbar-layer2{
position: absolute;
left: -172px;
bottom: 52px;
width: 52px;
height: 52px;
opacity: 0;
background-image: url(toolbar.png);
background-repeat: no-repeat;
background-position: 0 -222px;
transform-origin: 95% 95%;
transition:1s;
}
.toolbar-app:hover .toolbar-layer2{
position: absolute;
left: -172px;
bottom: 0px;
width: 172px;
height: 194px;
opacity: 1;
background-image: url(toolbar.png);
background-repeat: no-repeat;
background-position: 0 -222px;
transform-origin: 95% 95%;
transition:1s;
}
.toolbar-top{
margin-top: 1px;
transition: 1s;
display: block;
width: 52px;
height: 52px;
background-image: url(toolbar.png);
background-repeat: no-repeat;
background-position: 0 -674px;
}
.toolbar-top:hover{
margin-top: 1px;
transition: 1s;
display: block;
width: 52px;
height: 52px;
background-image: url(toolbar.png);
background-repeat: no-repeat;
background-position: 0 -736px;
}
==================
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="工具栏.css">
<title>工具条</title>
</head>
<body>
<div class="d">
<a href="" class="toolbar-weixin a" onMouseOver="tt1()">
<span class="toolbar-layer1" id="t1"></span>
</a>
<a href="" class="toolbar-feedback"></a>
<a href="" class="toolbar-app">
<span class="toolbar-layer2" id="t2"></span>
</a>
<a href="" class="toolbar-top"></a>
</div>
</body>
</html>