制作工具箱

作者：李永健
撰写时间：2019年 1月28日
开发工具与关键技术： C#MVC

Html页面代码：

<div class="navbar" style="position:absolute;top:88%;left:88%;"><div class="glyphicon glyphicon-briefcase"></div><ul class="menu"><li><a id="yl" class="fa fa-google-plus"title="测距""Ranging()"><img src="~/Content/content/images/toolIco/Ruler.png" /></a></li><li><a id="el" class="fa fa-google-plus"title="测面积""areaMeasure()" ><img src="~/Content/content/images/toolIco/Measure_Crop_32px_530009_easyicon.net.png" /></a></li><li><a id="sl" class="fa fa-twitter"title="圆选""drawGeometry1()" ><img src="~/Content/content/images/round.png" /></a></li><li><a id="dt" class="fa fa-linkedin"title="框选""drawGeometry5()"><img src="~/Content/content/images/wire.png" /></a></li><li><a id="sy" class="fa fa-pinterest"title="自定义框选" "drawGeometry2()" ><img src="~/Content/content/images/multilateral.png" /></a></li><li><a style="background:#f96161" class="fa fa-rss"title="清除""clearLayer()"><img src="~/Content/content/images/toolIco/bianjie.png" /></a></li></ul></div>

style样式代码：里面有详细的注解

   .navbar {width: 50px;/*宽*/height: 50px;/*高*/line-height: 53px;/*行高*/border-radius: 50%;/*圆角*/background: #139aec;/*背景颜色*/margin: auto;/*自动对齐*/position: relative;/*相对定位*/cursor: pointer;/*把箭头变为手形箭头 */text-align: center;/*居中*/font-size: 1.75em;/*字体大小*/           color: #fff;/*字体颜色*/          }         .navbar .menu {          list-style: none;padding: 0; /*内边距*/margin: 0; /*为边距*/position: absolute; /*绝对定位*/top: -100px; /*上边距*/left: -49px; /*左边距*/border: 75px solid transparent; /*边宽75px 实现  透明*/cursor: default;/*约束用于向列中插入默认值*/border-radius: 50%;transform: scale(0); /*缩放转换，改变元素的宽度和高度 scale（宽，高）*/transition: transform 1.4s ;/*1.4s执行transform*/z-index: -1; /*显示在navbar盒子下面 ， 1 就上面*/ }.navbar:hover .menu {transition: transform 0.4s 0.08s, z-index 0s 0.5s;transform: scale(1);z-index: 1;}.navbar .menu li {position: absolute;top: 55px;left: -17px;            transform-origin: 17px -45px; /*改变被转换元素的位置*/transition: 0.5s 0.1s; /*延迟*/}.navbar:hover .menu li {transition: all 0.6s;}.navbar .menu li a {width: 45px;height: 45px;line-height: 45px;border-radius: 50%;background: #8ecef9;position: absolute;font-size: 60%;color: #fff;transition: 0.6s;}.navbar:hover .menu li:nth-child(1) {  /*选择属于其父元素的第二个子元素*/transition-delay: 0.02s; /*过渡效果何时开始*/transform: rotate(85deg); /*旋转角度*/}.navbar:hover .menu li:nth-child(1) a {transition-delay: 0.04s;transform: rotate(635deg);}.navbar:hover .menu li:nth-child(2) {transition-delay: 0.04s;transform: rotate(125deg);}.navbar:hover .menu li:nth-child(2) a {transition-delay: 0.08s;transform: rotate(595deg);}.navbar:hover .menu li:nth-child(3) {transition-delay: 0.06s;transform: rotate(165deg);}.navbar:hover .menu li:nth-child(3) a {transition-delay: 0.12s;transform: rotate(555deg);}.navbar:hover .menu li:nth-child(4) {transition-delay: 0.08s;transform: rotate(205deg);}.navbar:hover .menu li:nth-child(4) a {transition-delay: 0.16s;transform: rotate(515deg);}.navbar:hover .menu li:nth-child(5) {transition-delay: 0.1s;transform: rotate(245deg);}.navbar:hover .menu li:nth-child(5) a {transition-delay: 0.2s;transform: rotate(475deg);}.navbar:hover .menu li:nth-child(6) {transition-delay: 0.12s;transform: rotate(285deg);}.navbar:hover .menu li:nth-child(6) a {transition-delay: 0.24s;transform: rotate(435deg);}.btn:hover{background:#41abeb}.navbar:hover{background:#139aec;}

效果图