本節(jié)課代碼 自行參考
$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;
}
2018-03-29
$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;
}
}