<!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>