1回答

• 

  我要成为前端大姐大

  2016-08-11 20:27:48

  scss部分
  $toolbar-size:52px;
  .toolbar{
  	position: fixed;
  	left: 50%;
  	bottom: 5px;
  	margin-left: -$toolbar-size / 2;
  }
  //将重复的代码合并
  .toolbar-item,.toolbar-btn,.toolbar-icon,.toolbar-text{
  	width: $toolbar-size;
      height: $toolbar-size;
  }
  .toolbar-item{
  	position: relative;
  	display: block;
  /*	width: $toolbar-size;
  	height: $toolbar-size;*/
  	margin-top: 1px;
  
  	&:hover{
  		.toolbar-icon{
  			top:-$toolbar-size;
  		}
  		.toolbar-text{
  			top: 0;
  		}
  
  		.toolbar-layer{
       		@include opacity(1);
  			@include scale(1);
  			@include transition(all 1s)
  		}
  	}
  }
  .toolbar-btn{
  	position: absolute;
  	left: 0;
  	top: 0;
  /*	width: $toolbar-size;
  	height: $toolbar-size;*/
  	overflow: hidden;
  }
  .toolbar-icon{
  	position: absolute;
  	left: 0;
  	top: 0;
  /*	width: $toolbar-size;
  	height: $toolbar-size;*/
  	background-color: #d0d6d9;
  	font-size: 36px;
  	color: #fff;
  	text-align: center;
  	line-height: $toolbar-size;
  	@include transition(top 1s);
  }
  .toolbar-text{
  	position: absolute;
  	left: 0;
  	top:$toolbar-size;
  /*	width: $toolbar-size;
  	height: $toolbar-size;*/
  	background-color: #98a1a6;
  	padding-top: 12px;
  	font-size: 12px;
  	color: #fff;
  	text-align: center;
  	line-height: 1.2;
  	@include transition(top 1s);
  }
  .toolbar-layer{
  	position: absolute;
  	right: $toolbar-size - 6;
  	bottom: -10px;
  	width: 172px;
  	background: url(../img/toolbar_img.png);
  	background-repeat: no-repeat;
  	@include opacity(0);
  	@include transform-origin(95% 95%);
  	@include scale(0.01);
  	@include transition(all 1s);
  }
  .toolbar-layer-weixin{
  	height: 212px;
  	background-position: 0 0;
  }
  .toolbar-layer-app{
  	height: 194px;
  	background-position: 0 -222px;
  }

  
  

  1 0

  共 1 条回复 >