制作工具箱

制作工具箱

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

Html页面代码：

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;
             }

效果图