Html
    Css
    Js

    
                        
	.wrap {
	width:50px;
	height:50px;
	background:#AD4CC7;
	box-shadow:0 0 1px #CC6AE7;
	border-radius:50%;
	cursor:pointer;
	position:relative;
	position:fixed;
	bottom:50px;
	left:50px;
	z-index:999;
	transition:0.5s
}
.wrap img {
	width:50px;
	height:50px;
	position:absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	margin:auto;
	border-radius:50%
}
.wrap .num1 {
	position:absolute;
	top:-89px;
	z-index:-1;
	border-radius:50%;
	text-align:center;
	line-height:40px;
	transition:.4s;
	right:20px;
	width:40px;
	height:40px;
	background:#CDD14E;
	box-shadow:0 0 1px #CDD14E;
}
.wrap .num2 {
	position:absolute;
	top:-67px;
	transition:0.6s;
	z-index:-1;
	text-align:center;
	line-height:40px;
	right:-37px;
	width:40px;
	height:40px;
	background:#CDD14E;
	box-shadow:0 0 1px #CDD14E;
	border-radius:50%
}
.wrap .num3 {
	position:absolute;
	top:-21px;
	transition:0.8s;
	z-index:-1;
	text-align:center;
	line-height:40px;
	right:-76px;
	width:40px;
	height:40px;
	background:#CDD14E;
	box-shadow:0 0 1px #CDD14E;
	border-radius:50%
}
.wrap .num4 {
	position:absolute;
	top:40px;
	transition:1s;
	z-index:-1;
	text-align:center;
	line-height:40px;
	right:-87px;
	width:40px;
	height:40px;
	background:#CDD14E;
	box-shadow:0 0 1px #CDD14E;
	border-radius:50%
}
.wrap .nums1 {
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	transition:.4s;
}
.wrap .nums2 {
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	transition:.6s;
}
.wrap .nums3 {
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	transition:.8s;
}
.wrap .nums4 {
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	transition:1s;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.0.0
 立即下载

左下收缩项目导航

1
      s2903059150
      2017/9/27 11:33:58

      收起的效果略有缺陷

      回复