老师求代码-慕课网

首页课程实战体系课手记专栏慕课教程

老师求代码

来源：1-1 课程介绍

liqingzhu

2015-06-28 18:14

老师求代码

写回答关注

1回答

weup

2015-12-22 20:40:05

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

0 0

侧栏工具条开发

带动画效果的工具条，掌握如何用CSS3完成简单的动画效果

68226 学习 · 289 问题

查看课程

相似问题

求源代码老师

回答 1

老师在不在？有没有代码？把代码放上来呗^^

回答 2

老师是用什么编写代码的

回答 1

按照老师代码实践发现scrollto undefiined

回答 3

isEqual() undefind是什么情况啊，我按照老师个代码敲的

回答 1

打开慕课网App查看更多内容