收缩按钮 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" >
        <style>
        *,*::before,*::after{box-sizing: border-box;-webkit-touch-callout: none; -webkit-user-select:auto;}
        html,body{color:#212121;font-family:"微软雅黑"; font-size:16px; border:0px solid red; height:100%; }
        
        body.floatBtnsGroup{background:white; border:0px solid blue; display: flex; justify-content:flex-end; align-items:flex-end;   }
        body.floatBtnsGroup .container{ width:150px; height:970px; display:block; margin:auto; position:absolute; border:0px solid red;   }
        body.floatBtnsGroup .container a{ display:flex; justify-content:center; align-items:center; font-size:1rem; }
        body.floatBtnsGroup .container a .btnName{ font-size:28px;  opacity:0; color: #fc4548; line-height: 48px; text-align:center; }
        
        .menu_opener {display: none;}
        
        .menu_opener:checked ~ .link_one  { bottom: 800px;right:0px; }
        .menu_opener:checked ~ .link_two  { bottom: 600px;right:0px; }
        .menu_opener:checked ~ .link_three{ bottom: 400px;right:0px; }
        .menu_opener:checked ~ .link_four { bottom: 200px;right:0px; }
        
        .menu_opener:checked ~ .link_one .btnName{ opacity:1; }
        .menu_opener:checked ~ .link_two .btnName{opacity:1;}
        .menu_opener:checked ~ .link_three .btnName {opacity:1;}
        .menu_opener:checked ~ .link_four .btnName {opacity:1;  }
        
        .menu_opener:checked ~ .barre_hamburger {opacity: 0;}
        .menu_opener:checked ~ .menu_opener_label:after {transform:rotate(45deg); top:70px; }
        .menu_opener:checked ~ .menu_opener_label:before {transform:rotate(-45deg); top:70px; }
        
        .menu_opener_label {background:#fc4548; width:150px;height:150px; display:block; cursor:pointer; border-radius:50%; position:absolute; bottom:0; right:0; z-index:10;}
        .menu_opener_label:after {position: absolute;top: 50px;left: 50px;background: #fff;content: "";width: 50px;height: 10px;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
        .menu_opener_label:before {position: absolute;top: 90px;left: 50px;background: #fff;content: "";width: 50px;height: 10px;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
        
        .barre_hamburger{ width:50px; height:10px; position:absolute; bottom: 70px;right: 50px; background:#fff; z-index:20; -webkit-transition: all 0.4s ease;transition: all 0.4s ease;  }
        
        .link_general{ width:150px; height:150px; display:block; border-radius:50%; position:absolute; bottom:0; right:0; background:#fbeaee; -webkit-transition:all 0.4s ease; transition: all 0.4s ease; }
        </style>
    </head>

    <body class="floatBtnsGroup" >
        <div class="container">
            <input type="checkbox" id="menu_opener_id" class="menu_opener">
            <label for="menu_opener_id" class="menu_opener_label"></label>
            <div class="barre_hamburger"></div>
            <a href="#" class="link_one   link_general">
                <span class="btnName" >需协调解决问题</span>
            </a>
            <a href="#" class="link_two   link_general">
                <span class="btnName" >进度低于10%</span>
            </a>
            <a href="#" class="link_three link_general">
                <span class="btnName" >未汇报</span>
            </a>
            <a href="#" class="link_four  link_general">
                <span class="btnName" >未认领</span>
            </a>
            
        </div>
    </body>
</html>

 

posted on 2022-03-23 13:55  九涅  阅读(37)  评论(0)  编辑  收藏  举报

导航