制作工具箱

制作工具箱

作者：李永健
撰写时间：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;
             }

效果图