本节课代码 自行参考
23568
2018-03-05 19:14
$toolbar-size: 52px;
.toolbar {
position: fixed;
left: 50%;
bottom: 5px;
margin-left: -$toolbar-size / 2;
}
.toolbar-item{
position: relative;
display: block;
width: $toolbar-size;
height: $toolbar-size;
background-image: url(img/toolbar.png);
background-repeat: no-repeat;
margin-top: 1px;
transition: background-position 1s;
&:hover {
.toolbar-layer {
opacity: 1;
filter: alpha(opacity=100); /* 兼容 */
transform: scale(1);
}
}
}
.toolbar-item-wenxin{
background-position: 0 -798px;
&:hover {
background-position: 0 -860px;
}
.toolbar-layer {
height: 212px;
background-position: 0 0;
}
}
.toolbar-item-feedback{
background-position: 0 -426px;
&:hover {
background-position: 0 -488px;
}
}
.toolbar-item-app{
background-position: 0 -550px;
&:hover {
background-position: 0 -612px;
}
.toolbar-layer {
height: 194px;
background-position: 0 -222px;
}
}
.toolbar-item-top{
background-position: 0 -674px;
&:hover {
background-position: 0 -736px;
}
}
.toolbar-layer{
position: absolute;
right: $toolbar-size - 6; /* 运算符两边要有空格 */
bottom: -10px;
width: 172px;
background-image: url(img/toolbar.png);
background-repeat: no-repeat;
opacity: 0;
filter: alpha(opacity=0);
transform-origin: 95% 95%;
transform: scale(0.01);
transition: all 1s;
}
1回答
-
- qq_黑怪怪_0
- 2018-03-29 16:38:31
$toolbar-size: 52px;
.toolbar {
position: fixed;
left: 50%;
bottom: 5px;
margin-left: -$toolbar-size / 2;
}
.toolbar-item {
position: relative;
display: block;
width: $toolbar-size;
height: $toolbar-size;
margin-top: 1px;
&:hover {
.toolbar-btn {
&:before {
top: -$toolbar-size;
}
&:after {
top: 0;
}
}
&:after {
@include opacity(1);
@include scale(1);
}
}
&:after {
content: "";
position: absolute;
right: $toolbar-size - 6;
bottom: -10px;
width: 172px;
background: url('../img/toolbar_img.png') no-repeat;
@include opacity(0);
@include transform-origin(95% 95%);
@include scale(0.01);
@include transition(all .5s);
}
}
.toolbar-item-weixin {
&:after {
content: "";
height: 212px;
background-position: 0 0;
}
.toolbar-btn {
@extend .icon-happy;
&:after {
content: "公众\a账号"
}
}
}
.toolbar-item-feedback {
.toolbar-btn {
@extend .icon-bubbles;
&:after {
content: "意见\a反馈"
}
}
}
.toolbar-item-app {
&:after {
content: "";
height: 194px;
background-position: 0 -222px;
}
.toolbar-btn {
@extend .icon-mobile;
&:after {
content: "APP\a下载"
}
}
}
.toolbar-item-top {
.toolbar-btn {
@extend .icon-arrow-up2;
&:after {
content: "返回\a顶部"
}
}
}
.toolbar-btn {
&, &:before, &:after {
position: absolute;
left: 0;
width: $toolbar-size;
height: $toolbar-size;
}
&:before, &:after {
content: "";
color: #fff;
text-align: center;
@include transition(top .5s);
}
top: 0;
overflow: hidden;
@extend [class^="icon-"];
&:before { // icon
top: 0;
line-height: $toolbar-size;
background: #d0d6d9;
font-size: 30px;
}
&:after { // text
top: $toolbar-size;
line-height: 1.2;
padding-top: 12px;
background: #98a1a6;
font-size: 12px;
white-space: pre;
}
}
侧栏工具条开发
68226 学习 · 289 问题
相似问题